@rookino/react-lottie-light

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