Skip to content

Commit aebac63

Browse files
committed
chore: update the README.md file
1 parent 691c9c5 commit aebac63

File tree

1 file changed

+32
-37
lines changed

1 file changed

+32
-37
lines changed

README.md

Lines changed: 32 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,75 +4,66 @@
44

55
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.
66

7-
> 👩‍💻 `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. :)
8-
9-
> 🙋‍♂️ Are you using `lottie-react` in production? Please send us a message with your website, feature requests and recommendations at: [contact@gamote.ro](mailto:contact@gamote.ro).
10-
11-
127
## Installation
138

14-
Install **react**, **react-dom** if you don’t have them already:
9+
1. Make sure you have the peer-dependencies installed: `react` and `react-dom`.
1510

16-
_**Note:** This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._
11+
> _**Note:** This library is using React Hooks so the **minimum** version required for both **react** and **react-dom** is **v16.8.0**._
1712
18-
```shell
19-
yarn add react@^16.8.0 react-dom@^16.8.0
20-
```
13+
2. Install `lottie-react` using **yarn**
2114

22-
Install **lottie-react** using npm:
15+
```shell
16+
yarn add lottie-react
17+
```
18+
19+
or **npm**
2320

24-
```shell
25-
yarn add lottie-react
26-
```
21+
```shell
22+
npm i lottie-react
23+
```
2724

2825
## Usage
2926

30-
### Component
27+
### Using the component ([try it](https://codesandbox.io/s/lottie-react-component-2k13t))
3128

3229
```tsx
30+
import React from "react";
3331
import Lottie from "lottie-react";
3432
import groovyWalkAnimation from "./groovyWalk.json";
3533
36-
const Example = () => {
37-
return <Lottie animationData={groovyWalkAnimation} />;
38-
};
34+
const App = () => <Lottie animationData={groovyWalkAnimation} loop={true} />;
3935
40-
export default Example;
36+
export default App;
4137
```
4238

43-
[Try it on CodeSandbox](https://codesandbox.io/s/lottie-react-component-2k13t)
39+
### Using the Hook ([try it](https://codesandbox.io/s/lottie-react-hook-13nio))
4440

45-
### Hook
46-
47-
```ts
41+
```tsx
42+
import React from "react";
4843
import { useLottie } from "lottie-react";
4944
import groovyWalkAnimation from "./groovyWalk.json";
5045
51-
const Example = () => {
46+
const App = () => {
5247
const options = {
5348
animationData: groovyWalkAnimation,
54-
loop: true,
55-
autoplay: true,
49+
loop: true
5650
};
5751
5852
const { View } = useLottie(options);
5953
60-
return View;
54+
return <>{View}</>;
6155
};
6256
63-
export default Example;
57+
export default App;
6458
```
6559
66-
[Try it on CodeSandbox](https://codesandbox.io/s/lottie-react-hook-13nio)
60+
### 📄 Documentation
6761
68-
## Documentation
62+
Checkout the [**documentation**](https://lottiereact.com) at [**https://lottiereact.com**](https://lottiereact.com) for more information and examples.
6963
70-
Checkout the [Documentation](https://lottiereact.com) for more information and examples: [lottiereact.com](https://lottiereact.com)
64+
## Tests
7165
72-
## Test
73-
```text
74-
yarn test
75-
```
66+
Run the tests using the `yarn test` command.
7667
7768
### Coverage report
7869
```text
@@ -90,15 +81,19 @@ All files | 100 | 100 | 100 | 100 |
9081
9182
## Contribution
9283
93-
Let us know if you have any suggestions or contributions. This package has the mission to help developers, so if you have any features that you think we should prioritize, reach out to us.
84+
Any **questions** or **suggestions**? Use the [**Discussions**](https://github.com/github/docs/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).
85+
86+
> 👩‍💻 `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. :)
87+
88+
Thank you for investing your time in contributing to our project! ✨
9489
9590
## Projects to check out
9691
9792
- [lottie-web](https://github.com/airbnb/lottie-web) - Lottie implementation for Web. Our project is based on it and you should check it because it will help you understand what's behind this package and it will give you a better understanding on what features should you expect to have in the future.
9893
- [lottie-android](https://github.com/airbnb/lottie-android) - Lottie implementation for Android
9994
- [lottie-ios](https://github.com/airbnb/lottie-ios) - Lottie implementation for iOS
10095
- [lottie-react-native](https://github.com/react-native-community/lottie-react-native) - Lottie implementation for React Native
101-
- [LottieFiles](https://lottiefiles.com/) - Are you looking for animations? LottieFiles is the way to go!
96+
- [LottieFiles](https://lottiefiles.com/) - Are you looking for animations files? LottieFiles has a lot of them!
10297
10398
## License
10499

0 commit comments

Comments
 (0)