use-lax

React hook to use with lax.js.

Usage

import React from 'react';
import { useLax, useLaxElement } from 'use-lax';

function App() {
  const [showBubble, setBubble] = useState(false);
  const toggleBubble = () => setBubble(!showBubble);

  // Use once in the top level element
  // to configure drivers and initial elements
  // https://github.com/alexfoxy/lax.js#setup
  useLax({
    drivers: [
      {
        name: 'scrollY',
        getValueFn: () => window.scrollY,
      },
    ],
  });

  return (
    <div>
      <button className="toggle-bubble" onClick={toggleBubble}>
        Toggle Bubble
      </button>
      <p>{showBubble ? '...now scroll down...' : '^ press the button ^'}</p>
      {showBubble ? <Bubble /> : null}
    </div>
  );
}

function Bubble() {
  // Use it on every component added dynamically
  // and provide the animation driven from the drivers
  const ref = useLaxElement({
    animationData: {
      scrollY: {
        presets: ['fadeInOut:200:0'],
        translateX: [
          [0, 'screenHeight'],
          [0, 'screenWidth'],
        ],
      },
    },
  });

  return <div ref={ref} className="bubble" />;
}

• Full example above
• Lax homepage example - HTML version
• Mario example - HTML version

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!