React component for [lottie-web](https://github.com/airbnb/lottie-web). This repositoriy originally is a fork from [react-lottie](https://github.com/chenqingspring/react-lottie), but then re-created using [create-react-app](https://reactjs.org/docs/create
npm install @rookino/react-lottie-lightReact 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.
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.
using npm:
``shell`
npm i @rookino/react-lottie-light
using yarn:
`shell`
yarn add @rookino/react-lottie-light
then you can import it in you project
`jsx`
import Lottie from "@rookino/react-lottie-light";
basic usage:
`jsx
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 (
Props
Some props that available inside this component:
$3
options is pretty much the same with
lottie-web's options`js
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",
},
};
`---
$3
React component style object to be added to the lottie animation's container element, not the lottie animation element.
---
$3
---
$3
---
$3
boolean to indicate component if it should be paused when component being clicked---
$3
boolean---
$3
function callback that going to be called when lottie completed the animation---
$3
string class that going to be used for container---
$3
boolean---
$3
array consists of 2 points where the animations should be started and ended---
$3
number used for the animation speed---
$3
direction going to be
1 or -1. 1 for normal animation direction, -1` for the reverse direction---
- react-lottie
- jarretmoses's comment
- React hooks
- lottie-web
- lottie-web's issue
Any kind of contribution, help, advice and criticism will always be welcomed.
---
MIT License © Permadi Afrian