All Projects → williamngan → pts-react-example

williamngan / pts-react-example

Licence: Apache-2.0 license
An example project of using Pts with React, using react-pts-canvas package.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects
shell
77523 projects

Projects that are alternatives of or similar to pts-react-example

Pts
A library for visualization and creative-coding
Stars: ✭ 4,628 (+3515.63%)
Mutual labels:  pts
ttycopy
A tool scanning other terminal.
Stars: ✭ 15 (-88.28%)
Mutual labels:  pts
viewts
Display PCR, DTS, PTS, bitrate, jitter of a mpeg TS.
Stars: ✭ 46 (-64.06%)
Mutual labels:  pts
react-pts-canvas
Pts Canvas React Component
Stars: ✭ 22 (-82.81%)
Mutual labels:  pts
pts-starter-kit
Quick start to build your own generative art / visualization / interactive demo using Pts.js. Supports javascript and typescript.
Stars: ✭ 25 (-80.47%)
Mutual labels:  pts

pts-react-example

This repo provides an example of using Pts in React via react-pts-canvas.

Pts is a typescript/javascript library for visualization and creative-coding. Get started at ptsjs.org.

Let's take a look at the demo first before we start.

screenshot

Using Pts with create-react-app

create-react-app is a popular tool by Facebook to bootstrap a React application.

To get started, take a look at the README in example folder.

Quick Start

If you just want to try out Pts, there's no need to install and build. Try out the online demo editor 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.

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

If needed, you can also use the legacy class component by extending PtsCanvasLegacy.

For documentations, please refer to react-pts-canvas repo.

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

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:

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].