npmpackage.info

Gathering detailed insights and metrics for @lottiefiles/react-lottie-player

@lottiefiles/react-lottie-player

lottie web player as a react component

3.5.4

729

MIT

TypeScript

15,744,096 2.5

Installations

npm install @lottiefiles/react-lottie-player

Pull Requests

Open

25

Total

92

Closed

37

Merged

30

Issues

Open

19

Total

74

Closed

55

Releases

v3.5.0

Published on 07 Dec 2022

v3.4.4

Published on 28 Mar 2022

v3.4.2

Published on 22 Feb 2022

v3.4.1

Published on 27 Aug 2021

v3.4.0

Published on 27 Aug 2021

v3.3.1

Published on 24 May 2021

View all 8 releases

Developer

LottieFiles

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

18.20.2

NPM Version

10.5.0 Statistics

729 Stars

179 Commits

80 Forks

12 Watching

35 Branches

21 Contributors

Updated on 19 Nov 2024

Languages

TypeScript (60.9%)

JavaScript (26.89%)

CSS (9.29%)

HTML (2.92%)

Total Downloads

Cumulative downloads

Total Downloads

15,744,096

Last day

-2.2%

38,019

Compared to previous day

Last week

0.8%

204,582

Compared to previous week

Last month

11%

850,065

Compared to previous month

Last year

81.1%

8,467,087

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

LottiePlayer React Component

This is a React component for the Lottie Web Player

Demo

screencast

Documentation

View documentation

In Javascript or TypeScript:

Install package using npm or yarn.

1npm install --save @lottiefiles/react-lottie-player

Import package in your code.

1import { Player, Controls } from '@lottiefiles/react-lottie-player';

Example/Development

Clone repo
run yarn install
run yarn storybook

1yarn storybook

Usage

Player component

Add the element Player and set the src prop to a URL pointing to a valid Lottie JSON.

1<Player
2  autoplay
3  loop
4  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
5  style={{ height: '300px', width: '300px' }}
6>
7  <Controls visible={true} buttons={['play', 'repeat', 'frame', 'debug']} />
8</Player>

Props

Prop	Description	Type	Default
`lottieRef`	Get lottie animation object	`function`	`undefined`
`onEvent`	Listen for events	`function`	`undefined`
`onStateChange`	Play state changes	`function`	`undefined`
`onBackgroundChange`	Listen for bg changes	`function`	`undefined`
`autoplay`	Autoplay animation on load.	`boolean`	`false`
`background`	Background color.	`string`	`undefined`
`controls`	Show controls.	`boolean`	`false`
`direction`	Direction of animation.	`number`	`1`
`hover`	Whether to play on mouse hover.	`boolean`	`false`
`keepLastFrame`	Stop animation on the last frame. Has no effect if `loop` is true.	`boolean`	`false`
`loop`	Whether to loop animation.	`boolean`	`false`
`renderer`	Renderer to use.	`"svg"	"canvas"`
`speed`	Animation speed.	`number`	`1`
`style`	The style for the container.	`object`	`undefined`
`src` (required)	Bodymovin JSON data or URL to JSON.	`object`	`string`

Get Player instance

To call methods on the instance of the Player component. you may get a reference to the component and call the methods on ref.current. This is esentially reacts way of doing a document.getElementById(); You may then use this ref ie: player in the example below to call methods that are described in this documentation. See ref in react documentation

1import React from 'react';
2import { Player } from '@lottiefiles/react-lottie-player';
3
4class App extends React.Component {
5  constructor(props) {
6    super(props);
7    this.player = React.createRef(); // initialize your ref
8  }
9  render() {
10    return (
11      <Player
12        ref={this.player} // set the ref to your class instance
13        autoplay={false}
14        loop={true}
15        controls={true}
16        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
17        style={{ height: '300px', width: '300px' }}
18      ></Player>
19    );
20  }
21}
22
23export default App;

Get Lottie instance

The lottieRef prop returns the Lottie instance which you can use to set data and call methods as described in the bodymovin documentation.

1import React from 'react';
2import { Player } from '@lottiefiles/react-lottie-player';
3
4class App extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = { lottie: null }; // initialize your state
8  }
9
10  render() {
11    return (
12      <Player
13        lottieRef={instance => {
14          this.setState({ lottie: instance }); // the lottie instance is returned in the argument of this prop. set it to your local state
15        }}
16        autoplay={false}
17        loop={true}
18        controls={true}
19        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
20        style={{ height: '300px', width: '300px' }}
21      ></Player>
22    );
23  }
24}
25
26export default App;

Listening for events

1import React from 'react';
2import { Player } from '@lottiefiles/react-lottie-player';
3
4class App extends React.Component {
5  constructor(props) {
6    super(props);
7    this.player = React.createRef();
8  }
9
10  doSomething() {
11    this.player.current.play(); // make use of the player and call methods
12  }
13
14  render() {
15    return (
16      <Player
17        onEvent={event => {
18          if (event === 'load') this.doSomething(); // check event type and do something
19        }}
20        ref={this.player}
21        autoplay={false}
22        loop={true}
23        controls={true}
24        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
25        style={{ height: '300px', width: '300px' }}
26      ></Player>
27    );
28  }
29}
30
31export default App;

Events

The following events are exposed and can be listened to via addEventListener calls.

Name	Description
`load`	Animation data is loaded.
`error`	An animation source cannot be parsed, fails to load or has format errors.
`ready`	Animation data is loaded and player is ready.
`play`	Animation starts playing.
`pause`	Animation is paused.
`stop`	Animation is stopped.
`freeze`	Animation is paused due to player being invisible.
`loop`	An animation loop is completed.
`complete`	Animation is complete (all loops completed).
`frame`	A new frame is entered.

Methods

`pause() => void`

Pause animation play.

Returns

Type: void

`play() => void`

Start playing animation.

Returns

Type: void

`setPlayerDirection(direction: 1 | -1 ) => void`

Animation play direction.

Parameters

Name	Type	Description
`value`	`number`	Direction values.

Returns

Type: void

`setPlayerSpeed(speed?: number) => void`

Sets animation play speed.

Parameters

Name	Type	Description
`value`	`number`	Playback speed.

Returns

Type: void

`stop() => void`

Stops animation play.

Returns

Type: void

`setSeeker(frame: number, play: boolean) => void`

Seek to a given frame.

Returns

Type: void

Contributing

We use changesets to maintain a changelog for this repository. When making any change to the codebase that impacts functionality or performance we require a changeset to be present.

To add a changeset run:

yarn run changeset

And select the type of version bump you'd like (major, minor, path).

You can document the change in detail and format it properly using Markdown by opening the ".md" file that the "yarn changeset" command created in the ".changeset" folder. Open the file, it should look something like this:

---
"@lottiefiles/pkg1": minor
"@lottiefiles/pkg2": major
---

This is where you document your **changes** using Markdown.

- You can write
- However you'd like
- In as much detail as you'd like

Aim to provide enough details so that team mates and future you can understand the changes and the context of the change.

You can commit your changes and the changeset to your branch and then create a pull request on the develop branch.

License

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:83: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/stale.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/tests.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/tests.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/LottieFiles/lottie-react/tests.yml/master?enable=pin
Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Signed-Releases

Determines if the project cryptographically signs release artifacts.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

78 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-653v-rqx9-j85p
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx

Score

2.5

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@lottiefiles/react-lottie-player

Installations

Pull Requests

25

92

37

30

Issues

19

74

55

Releases

Developer

Developer Guide

CommonJS

Yes

18.20.2

10.5.0

Statistics

Languages

Total Downloads

15,744,096

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

LottiePlayer React Component

Demo

Documentation

In Javascript or TypeScript:

Example/Development

Usage

Player component

Props

Get Player instance

Get Lottie instance

Listening for events

Events

Methods

pause() => void

Returns

play() => void

Returns

setPlayerDirection(direction: 1 | -1 ) => void

Parameters

Returns

setPlayerSpeed(speed?: number) => void

Parameters

Returns

stop() => void

Returns

setSeeker(frame: number, play: boolean) => void

Returns

Contributing

License

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10

`pause() => void`

`play() => void`

`setPlayerDirection(direction: 1 | -1 ) => void`

`setPlayerSpeed(speed?: number) => void`

`stop() => void`

`setSeeker(frame: number, play: boolean) => void`