react-neon
v0.6.4
Published
A canvas and WebGL overlay for React components
Downloads
107
Readme
react-neon
React Neon is a library to put a canvas on top of a component in order to draw a graphic effect. It's a bit like a post-processing graphical shader. A set of effects is included, with a base class to define new effects too.
Docs
Documentation for React Neon is available at https://react-neon.ooer.com/
Quick start
Install the module using npm i react-neon
first, then import it in to your React app using import withNeon from 'react-neon';
in your code. If you're using one of the included effects you'll also need to import the fx using import withNeon, { fx } from 'react-neon';
.
withNeon is a React HoC, so you can use it when you export your component class and define an effect at the same time.
export class withNeon(myComponent, new fx.Particles());
Building from source
You can build react-neon and its effects using npm run build
if you'd rather not install from NPM.
TODO
- Element mapper (done)
- Canvas overlay (done)
- Resize observer (done)
- Scrolling updater / intersection observer (done)
- Inject TWGL for WebGL shader effects (or minimal alternative) (done)
- Perf timer
- React/Vue/framework version
- Register of active effects
- FX Plugins (done)
- NPM module (done)
- Tests
- Stencil (shape-outside?)