Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonluca/lottie-react-component
Render your lottie animations in React
https://github.com/jonluca/lottie-react-component
Last synced: 14 days ago
JSON representation
Render your lottie animations in React
- Host: GitHub
- URL: https://github.com/jonluca/lottie-react-component
- Owner: jonluca
- Created: 2022-07-28T00:35:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-09T07:34:29.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T11:57:31.089Z (26 days ago)
- Language: TypeScript
- Size: 93.8 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lottie for React
[](https://www.npmjs.com/package/lottie-react-component) [](https://www.npmjs.com/package/lottie-react-native)
**Lottie component for React** with runtime animation control and full typescript support.
# Introduction
Lottie is a library for the Web, Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) animations exported as JSON with [bodymovin](https://github.com/bodymovin/bodymovin) and renders them natively on each platform!
For the first time, designers can create **and ship** beautiful animations without an engineer painstakingly recreating it by hand.
_This library is a [lottie-react-web](https://github.com/felippenardi/lottie-react-web) fork that adds native typescript support, esm and cjs compatibility, and a rewrite with hooks_
# Getting Started
Get started with Lottie by installing the node module with yarn or npm:
```
yarn add lottie-react-component
```
or
```
npm i --save lottie-react-component
```
# Usage
`` component can be used in a declarative way:
```jsx
import React from "react";
import Lottie from "lottie-react-component";
import animation from "./animation.json";
const App = () => ;
export default App;
```
By default it will automatically play the animation in loop.
Lottie's animation control can be set via props. Here is an example of a toggle animation that reacts on click:
```jsx
import React, { Component } from 'react';
import Lottie from 'lottie-react-component'
import toggleAnimation from './toggleAnimation.json'
export default const App = () => {
const [isToggled, setIsToggled] = useState(false);
return (
{
setIsToggled(t => !t);
}}
>
)
}
export default App
```
## API
These are all props available:
### Props
| Prop | Description | Default |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| **`animationData`** | **Mandatory** - The source of the animation. | — |
| **`assetsPath`** | **Mandatory** - The root path for external assets. | `images` |
| **`loop`** | Play animation non-stop in a loop. | `true` |
| **`autoplay`** | Automatically play animation when it is instantiated. | `true` |
| **`renderer`** | The method for rendering the animation. | `svg` |
| **`rendererSettings`** | Customize bodymovin aspect ratio configurations. | — |
| **`animationControl`** | This is where you can change the animation at runtime. A key value pair of a After Effects property path and the a custom value to apply to it. See details below. | — |
| **`width`** | Sets the width of the animation container. | `100%` |
| **`height`** | Sets the heigth of the animation container. | `100%` |
| **`isStopped`** | A boolean flag indicating whether or not the animation is stopped. | `false` |
| **`isPaused`** | A boolean flag indicating whether or not the animation is paused. | `false` |
| **`speed`** | An integer indicating the speed of the animation ( `1` is `100%`.) | `1` |
| **`direction`** | An integer indicating wether the animation progresses in the usual (`1`) or reverse (`-1`) direction | `1` |
| **`ariaRole`** | A string indicating the animation container `ariaRole` property | `"button"` |
| **`ariaLabel`** | A string indicating the animation container `ariaLabel` property | `"animation"` |
| **`title`** | A string indicating the animation container `title` property | `""` |
## Changing animation at runtime
You can target an specific After Effects layer property and change it at
runtime by passing setting a `property` object on the `` prop. Example:
```jsx
import React from "react";
import Lottie from "lottie-react-component";
import animation from "./animation.json";
const Animation = ({ x, y }) => (
);
export default Animation;
```
This will override the `Position` value of the layer `JoyStkCtrl01` at runtime.
Lottie is compatible with [Joystick 'n Sliders](https://aescripts.com/joysticks-n-sliders/) After Effects plugin, so you can create amazing animations easily.