diff --git a/README.md b/README.md index 80f6291..cf96527 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,18 @@ Fully declarative React Lottie player -Inspired by [several](https://github.com/felippenardi/lottie-react-web) [existing](https://github.com/chenqingspring/react-lottie) [packages](https://github.com/Gamote/lottie-react) wrapping [lottie-web](https://github.com/airbnb/lottie-web) for React, I created this package because I wanted something that just works and is simple to use. None of the alternatives properly handle changes of props like playing/pausing/segments. This lead to lots of hacks to get the animations to play correctly. +Inspired by [several](https://github.com/felippenardi/lottie-react-web) [existing](https://github.com/chenqingspring/react-lottie) [packages](https://github.com/Gamote/lottie-react) wrapping [lottie-web](https://github.com/airbnb/lottie-web) for React, I created this package because I wanted something that just works and is easy to use. None of the alternatives properly handle changes of props like playing/pausing/segments. This lead to lots of hacks to get the animations to play correctly. `react-lottie-player` is a complete rewrite using modern hooks 🎣 for more readable code, an easy to use, seamless and **fully declarative control of the lottie player**. -Does not [leak memory like lottie-web](https://github.com/mifi/react-lottie-player/issues/35) if you use repeaters. - ![Tests](https://github.com/mifi/react-lottie-player/workflows/Tests/badge.svg) [![NPM](https://img.shields.io/npm/v/react-lottie-player.svg)](https://www.npmjs.com/package/react-lottie-player) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) +## Features + +- Fully declarative - handles state changes correctly +- Does not [leak memory like lottie-web](https://github.com/mifi/react-lottie-player/issues/35) if you use repeaters +- LottiePlayerLight support (no `eval`) + ## Install ```bash diff --git a/example/src/App.js b/example/src/App.js index ff1f30d..6b844da 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,4 +1,5 @@ import Lottie from 'react-lottie-player' +import LottieLight from 'react-lottie-player/dist/LottiePlayerLight' import React, { useState, memo, useRef, useEffect } from 'react'; import Test from './Test'; @@ -7,7 +8,7 @@ import lottieJson from './26514-check-success-animation.json'; const boxStyle = { boxShadow: '0 0 10px 10px rgba(0,0,0,0.03)', width: 200, maxWidth: '100%', margin: 30, padding: 30, borderRadius: 7, display: 'flex', flexDirection: 'column' }; -const ScrollTest = memo(() => { +const ScrollTest = memo(({ Component }) => { const scrollRef = useRef(); const [animationPosition, setAnimationPosition] = useState(0); @@ -30,7 +31,7 @@ const ScrollTest = memo(() => { ⬇️ - { ) }); -const MainTest = memo(() => { +const MainTest = memo(({ Component }) => { const [segmentFrom, setSegmentFrom] = useState(0); const [segmentTo, setSegmentTo] = useState(70); const [segmentsEnabled, setSegmentsEnabled] = useState(false); @@ -69,7 +70,7 @@ const MainTest = memo(() => { return (
- { ); }); -const RangeTest = memo(() => { +const RangeTest = memo(({ Component }) => { const [goTo, setGoTo] = useState(55); const [play, setPlay] = useState(false); const [mounted, setMounted] = useState(true); @@ -143,7 +144,7 @@ const RangeTest = memo(() => { {mounted && ( <> - { ); }); -const PathLoadTest = () => ( +const PathLoadTest = ({ Component }) => (
- ( ); -const LazyLoadTest = memo(() => { +const LazyLoadTest = memo(({ Component }) => { const [animationData, setAnimationData] = useState(); useEffect(() => { @@ -196,7 +197,7 @@ const LazyLoadTest = memo(() => { return (
{animationData ? ( - { const App = () => { - if (window.location.pathname.startsWith('/test')) return ; + const [useLottieLight, setUseLottieLight] = useState(false); + + const Component = useLottieLight ? LottieLight : Lottie; return ( <>

react-lottie-player Live Demo

-

View source here

+
+ View source code +
setUseLottieLight(e.target.checked)} />
+
- - - - - + + + + +
); } -export default App +export default window.location.pathname.startsWith('/test') ? Test : App;