@animatry/react

React integration for the Animatry animation library.
Provides the useAnimatry hook and <Animatry> component to register and manage scoped animations within React components.

Installation

Install via npm:

npm install @animatry/react

useAnimatry hook

import { useRef } from 'react';
import { useAnimatry } from '@animatry/react';
import { animatry } from 'animatry';

export default function Example() {
  const ref = useRef(null);

  useAnimatry(() => {
    animatry.to(ref.current, { x: 200 });
  }, [/* deps */]);

  return <div className="box" ref={ref}>Animate me</div>;
}

You can also pass a scoped element explicitly:

useAnimatry(() => {
  animatry.from('.item', { opacity: 0 });
}, {
  scope: ref,
  dependencies: [someState],
});

<Animatry> component

The <Animatry> component automatically creates a scoped animation context and attaches it to the wrapped element. You can pass your animation logic via a load prop.

import { Animatry } from '@animatry/react';
import { animatry } from 'animatry';

export default function Demo() {
  return (
    <Animatry load={() => {
      animatry.to('.red', { x: 300 });
    }}>
      <div className="red">Animated</div>
    </Animatry>
  );
}

For more usage examples and plugin integration, visit animatry.com/docs.