https://github.com/williamngan/react-pts-canvas-examples

An example project of using Pts with React, using react-pts-canvas package.
https://github.com/williamngan/react-pts-canvas-examples

canvas pts react

Last synced: 12 days ago
JSON representation

An example project of using Pts with React, using react-pts-canvas package.

• Host: GitHub
• URL: https://github.com/williamngan/react-pts-canvas-examples
• Owner: williamngan
• License: apache-2.0
• Created: 2017-08-19T07:45:45.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-02-26T09:16:17.000Z (9 months ago)
• Last Synced: 2024-10-22T19:19:34.890Z (18 days ago)
• Topics: canvas, pts, react
• Language: JavaScript
• Homepage:
• Size: 8.58 MB
• Stars: 134
• Watchers: 9
• Forks: 9
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - pts-react-example

README

        
# pts-react-example

This repo provides an example of using [react-pts-canvas](https://github.com/williamngan/react-pts-canvas) with [Vite](https://vitejs.dev/). The example code will also work with [create-react-app](https://create-react-app.dev/) if you prefer it over Vite.

please refer to documentations in [`react-pts-canvas`](https://github.com/williamngan/react-pts-canvas) repo for details.

[Pts](https://github.com/williamngan/pts) is a typescript/javascript library for visualization and creative-coding. Get started at [ptsjs.org](https://ptsjs.org).

Let's take a look at [the demo](https://williamngan.github.io/react-pts-canvas-examples/build/) first before we start.

![screenshot](./screenshot.png)

## Quick Start

If you just want to try out Pts, there's no need to install and build. Try out the [online demo editor](https://ptsjs.org/demo/edit/?name=polygon.convexHull) for quick experimentations.

## Technical notes

For common use cases, you can include `PtsCanvas` functional component in your own component. Take a look at `PtsExamples.jsx` for example components.

```javascript

import { PtsCanvas } from "react-pts-canvas";

```

Legacy class component is deprecated in react-pts-canvas v0.4. If you still need it, use v0.3.x and take a look at the code in `legacy` folder. 

If you need to use Pts, you can import a class like this:

```javascript

import {Pt, Create, Util} from "pts"; // use ES6

```

Note that Pts is an javascript es6 library that targets modern browsers. It also provides an ES5 version for use in older builds. To use ES5, import a class like this:

```javascript

import {Pt} from "pts/dist/es5"; // use ES5

```

## License

Apache License 2.0. See LICENSE file for details.

Copyright © 2017-2018 by William Ngan and contributors.