lottie-light-react
Version:
Lottie for React (lottie light)
105 lines (69 loc) • 5.45 kB
Markdown
# lottie-light-react
[](https://www.npmjs.com/package/lottie-react) [](https://www.npmjs.com/package/lottie-react) [](https://snyk.io/test/github/Gamote/lottie-react?targetFile=package.json) [](https://coveralls.io/github/Gamote/lottie-react?branch=master) [](https://github.com/facebook/jest) [](https://github.com/Gamote/lottie-react/blob/master/LICENSE)
### This project is a modified version of **[lottie-react](https://github.com/Gamote/lottie-react)**, which uses just the [light version of lottie](https://github.com/airbnb/lottie-web/issues/929). This saves significant size in your end bundles.
This project is meant to give developers full control over **[Lottie](https://airbnb.design/lottie/)** instance with minimal implementation by wrapping **[lottie-web](https://github.com/airbnb/lottie-web)** in a Component or Hook that can be easily used in **React** applications.
## Installation
1. Make sure you have the peer-dependencies installed: `react` and `react-dom`.
> _**Note:** This library is using React Hooks so the **minimum** version required for both **react** and **react-dom** is **v16.8.0**._
2. Install `lottie-light-react` using **yarn**
```shell
yarn add lottie-light-react
```
or **npm**
```shell
npm i lottie-light-react
```
## Usage
### Using the component ([try it](https://codesandbox.io/s/lottie-react-component-2k13t))
```tsx
import React from "react";
import Lottie from "lottie-light-react";
import groovyWalkAnimation from "./groovyWalk.json";
const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;
export default App;
```
### Using the Hook ([try it](https://codesandbox.io/s/lottie-react-hook-13nio))
```tsx
import React from "react";
import { useLottie } from "lottie-light-react";
import groovyWalkAnimation from "./groovyWalk.json";
const App = () => {
const options = {
animationData: groovyWalkAnimation,
loop: true
};
const { View } = useLottie(options);
return <>{View}</>;
};
export default App;
```
### 📄 Documentation
Checkout the [**documentation**](https://lottiereact.com) at [**https://lottiereact.com**](https://lottiereact.com) for more information and examples.
## Tests
Run the tests using the `yarn test` command.
### Coverage report
```text
-----------------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------------------------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
components | 100 | 100 | 100 | 100 |
Lottie.ts | 100 | 100 | 100 | 100 |
hooks | 100 | 100 | 100 | 100 |
useLottie.tsx | 100 | 100 | 100 | 100 |
useLottieInteractivity.tsx | 100 | 100 | 100 | 100 |
-----------------------------|---------|----------|---------|---------|-------------------
```
## Contribution
Any **questions** or **suggestions**? Use the [**Discussions**](https://github.com/Gamote/lottie-react/discussions) tab. Any **issues**? Don't hesitate to document it in the [**Issues**](https://github.com/Gamote/lottie-react/issues) tab, and we will do our best to investigate it and fix it. Any **solutions**? You are very welcomed to open a [**pull request**](https://github.com/Gamote/lottie-react/pulls).
> 👩💻 `v3` is under development and is planning to bring a lot of features and improvements. But unfortunately, at the moment all the maintainers are super busy with work related projects. You can check out the progress under the `v3` branch. And of course, you are encouraged to contribute. :)
Thank you for investing your time in contributing to our project! ✨
## Projects to check out
- [lottie-web](https://github.com/airbnb/lottie-web) - Lottie implementation for Web. Our project is based on it, and you might want to check it out in order to have a better understanding on what's behind this package or what features could you expect to have in the future.
- [lottie-android](https://github.com/airbnb/lottie-android) - Lottie implementation for Android
- [lottie-ios](https://github.com/airbnb/lottie-ios) - Lottie implementation for iOS
- [lottie-react-native](https://github.com/react-native-community/lottie-react-native) - Lottie implementation for React Native
- [LottieFiles](https://lottiefiles.com/) - Are you looking for animations files? LottieFiles has a lot of them!
## License
**lottie-react** is available under the [MIT license](https://github.com/Gamote/lottie-react/blob/main/LICENSE).
Thanks to [David Probst Jr](https://lottiefiles.com/davidprobstjr) for the animations used in the examples.