@rookino/react-lottie-light NPM

React Lottie Light

React component for lottie-web. This repositoriy originally is a fork from react-lottie, but then re-created using create-react-app.

This component using functional component and hooks, instead of component classes.

Light version of Lottie

This component of lottie using the lottie-light, so bear in mind that expression cannot be used with this component. If you want to use expression you can fork this repo then modify the lottie import.

Installation

using npm:

npm i @rookino/react-lottie-light

using yarn:

yarn add @rookino/react-lottie-light

then you can import it in you project

import Lottie from "@rookino/react-lottie-light";

Using the components

basic usage:

import Lottie from "@rookino/react-lottie-light";
import animation from "your-animation.json";

const MyComponent = () => {
  const defaultOptions = {
    animationData: animation,
    loop: true,
    autoplay: true,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <div>
      <Lottie options={defaultOptions} />
    </div>
  );
};

Props

Some props that available inside this component:

options

options is pretty much the same with lottie-web's options

const options = {
  loop: true,
  autoplay: true,
  animationData: animationData, // the animation data
  // ...or if your animation contains repeaters:
  // animationData: cloneDeep(animationData), // e.g. lodash.clonedeep
  rendererSettings: {
    preserveAspectRatio: "xMinYMin slice", // Supports the same options as the svg element's preserveAspectRatio property
    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
    className: "some-css-class-name",
    id: "some-id",
  },
};