@octanejs/lottie-react

Render Lottie animations in Octane. The binding provides the Lottie component, the useLottie and useLottieInteractivity hooks, and the LottiePlayer export from lottie-web.

npm install @octanejs/lottie-react

pnpm add @octanejs/lottie-react

import Lottie from '@octanejs/lottie-react';
import animationData from './animation.json';

export function LoadingAnimation() {
  return (
    <Lottie
      animationData={animationData}
      aria-label="Loading"
      autoplay
      loop
      style={{ width: '8rem' }}
    />
  );
}

Pass an object ref as lottieRef to control playback through methods such as play, pause, and goToAndStop. Use useLottie when you need the rendered View and the playback methods in the same component. Pass the hook result as lottieObj to useLottieInteractivity to attach scroll or cursor actions.

When migrating from lottie-react, update the import after confirming that Octane renders the component and owns the returned View.

Animation callbacks such as onComplete and onEnterFrame receive Lottie player events. Container props and event handlers use Octane's native DOM types. Server rendering emits the container and initializes playback on the client.

This binding ports [email protected] by David Gamote and contributors. Its upstream license and source and test evidence accompany the package.