react-lottie-player alternatives and similar libraries
Based on the "Framework bindings / integrations" category.
Alternatively, view react-lottie-player alternatives based on common mentions on social networks and blogs.
-
react-on-rails
Integration of React + Webpack + Rails + rails/webpacker including server-side rendering of React, enabling a better developer experience and faster client performance. -
-
react-unity-webgl
React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React. -
-
backbone-react-component
A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server -
-
-
gl-react
DISCONTINUED. OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm. -
gl-react-dom
WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm -
elm-react-component
DISCONTINUED. A React component which wraps an Elm module to be used in a React application.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-lottie-player or a related project?
README
Fully declarative React Lottie player
Inspired by several existing packages wrapping 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 hooks 🎣 for more readable code, easy to use, seamless and fully declarative control of the lottie player.
Features
- Fully declarative
- Handles state changes correctly
- Does not leak memory like lottie-web if you use repeaters
- LottiePlayerLight support (no
eval) - Alternative imperative API using ref (use at your own risk)
Install
npm install --save react-lottie-player
Usage
import React from 'react'
import Lottie from 'react-lottie-player'
// Alternatively:
// import Lottie from 'react-lottie-player/dist/LottiePlayerLight'
import lottieJson from './my-lottie.json'
export default function Example() {
return (
<Lottie
loop
animationData={lottieJson}
play
style={{ width: 150, height: 150 }}
/>
)
}
Example
[👩🏿💻 Example code](example/src/App.js)
Lazy loading example
const MyComponent = () => {
const [animationData, setAnimationData] = useState();
useEffect(() => {
import('./animation.json').then(setAnimationData);
}, []);
if (!animationData) return <div>Loading...</div>;
return <Lottie animationData={animationData} />;
}
Imperative API (ref)
const lottieRef = useRef();
useEffect(() => {
console.log(lottieRef.current.currentFrame);
}, [])
return <Lottie ref={lottieRef} />;
See also #11
LottiePlayerLight
The default lottie player uses eval. If you don't want eval to be used in your code base, you can instead import react-lottie-player/dist/LottiePlayerLight. For more discussion see #39.
Lottie animation track scrolling div
See [example/App.js](example/src/App.js) (ScrollTest) in live example.
Resize mode: cover
If you want the animation to fill the whole container, you can pass this prop. See also #55:
<Lottie rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }} />
API
See [PropTypes](src/props.js) and lottie-web.
Releasing
- Commit & wait for CI tests
np
Credits
- https://lottiefiles.com/26514-check-success-animation
- https://lottiefiles.com/38726-stagger-rainbow
- Published with create-react-library 😎
License
MIT © mifi
Made with ❤️ in 🇳🇴
Follow me on GitHub, YouTube, IG, Twitter for more awesome content!
*Note that all licence references and agreements mentioned in the react-lottie-player README section above
are relevant to that project's source code only.