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",
  },
};

style

React component style object to be added to the lottie animation's container element, not the lottie animation element.

width

height

isClickToPauseDisabled

boolean to indicate component if it should be paused when component being clicked

isStopped

boolean

onComplete

function callback that going to be called when lottie completed the animation

className

string class that going to be used for container

isPaused

boolean

segments

array consists of 2 points where the animations should be started and ended

speed

number used for the animation speed

direction

direction going to be 1 or -1. 1 for normal animation direction, -1 for the reverse direction

References

• react-lottie
• jarretmoses's comment
• React hooks
• lottie-web
• lottie-web's issue

Finally

Any kind of contribution, help, advice and criticism will always be welcomed.

MIT License © Permadi Afrian