Welcome to React Neon
React Neon is a 'post-processing image layer' for React components.
Import the library and the effects, or create your own effect, and use the High Order Component to add a canvas layer to your React code. Interact with the mouse, use intersection observers, update based on the scroll position, and more.
Using an effect from the included effects only requires a small change to your React code.
For example, to wrap the ShoppingList component from the React tutorial with a Neon glow.
import withNeon, { fx } from 'react-neon';
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
const neonEffect = new fx.Neon({ size: 10 });
const neonShoppingList = withNeon(ShoppingList, neonEffect);
To learn more, check out the Quick Start Guide