# @bricehabib/react-lottie-player

> Fully declarative React Lottie player

Latest version **1.4.2** (published 2022-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bricehabib/react-lottie-player
pnpm add @bricehabib/react-lottie-player
yarn add @bricehabib/react-lottie-player
bun add @bricehabib/react-lottie-player
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2022-04-12 |
| First published | 2022-04-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 548.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 532 |
| Author | mifi |
| Maintainers | bricehabib |

## Links

- npm: https://www.npmjs.com/package/@bricehabib/react-lottie-player
- Repository: https://github.com/mifi/react-lottie-player
- Homepage: https://github.com/mifi/react-lottie-player#readme
- Issues: https://github.com/mifi/react-lottie-player/issues
- npm.io page: https://npm.io/package/@bricehabib/react-lottie-player

## Dependencies (3)

- [lottie-web](https://npm.io/package/lottie-web.md) ^5.7.6
- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0

## Recent versions

- 1.4.2 (latest) — 2022-04-12
- 1.4.1 — 2022-04-12

## README

![](https://github.com/mifi/gifs/raw/master/react-lottie-player.gif)

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.

`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)

## Install

```bash
npm install --save react-lottie-player
```

## Usage

```jsx
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

[![](screenshot.png)](https://mifi.github.io/react-lottie-player/)

[Open live example](https://mifi.github.io/react-lottie-player/)

[View example code](https://github.com/mifi/react-lottie-player/blob/master/example/src/index.js)

## Lazy loading example

```js
const MyComponent = () => {
  const [animationData, setAnimationData] = useState();

  useEffect(() => {
    import('./animation.json').then(setAnimationData);
  }, []);

  if (!animationData) return <div>Loading...</div>;
  return <Lottie animationData={animationData} />;
}
```

See also [#11](https://github.com/mifi/react-lottie-player/issues/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](https://github.com/mifi/react-lottie-player/pull/39).

## Lottie animation track scrolling div

See [example/App.js](https://github.com/mifi/react-lottie-player/blob/master/example/src/App.js) (ScrollTest) in [live example](https://mifi.github.io/react-lottie-player/).

## Resize mode: cover

If you want the animation to fill the whole container, you can pass this prop. See also [#55](https://github.com/mifi/react-lottie-player/issues/55):

```js
<Lottie rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }} />
```

## API

See https://github.com/airbnb/lottie-web

[View PropTypes](https://github.com/mifi/react-lottie-player/blob/64eac186947be7ee5aad304ca4193c507ace8dc3/src/index.js#L147)

## 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](https://github.com/transitive-bullshit/create-react-library) 😎

## License

MIT © [mifi](https://github.com/mifi)

---

Made with ❤️ in [🇳🇴](https://www.youtube.com/watch?v=uQIv8Vo9_Jc)

[More apps by mifi.no](https://mifi.no/)

Follow me on [GitHub](https://github.com/mifi/), [YouTube](https://www.youtube.com/channel/UC6XlvVH63g0H54HSJubURQA), [IG](https://www.instagram.com/mifi.no/), [Twitter](https://twitter.com/mifi_no) for more awesome content!

---
_Source: https://npm.io/package/@bricehabib/react-lottie-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._