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