npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rpcbase/lottie

v3.5.3

Published

Lottie web player wrapper for React

Downloads

16

Readme

LottiePlayer React Component

This is a React component for the Lottie Web Player

Demo

screencast

Documentation

In Javascript or TypeScript:

  1. Install package using npm or yarn.
npm install --save @lottiefiles/react-lottie-player
  1. Import package in your code.
import { Player, Controls } from '@lottiefiles/react-lottie-player';

Example/Development

  1. Clone repo

  2. run yarn install

  3. run yarn storybook

yarn storybook

Usage

Player component

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

<Player
  autoplay
  loop
  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
  style={{ height: '300px', width: '300px' }}
>
  <Controls visible={true} buttons={['play', 'repeat', 'frame', 'debug']} />
</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" | 'svg' | | speed | Animation speed. | number | 1 | | style | The style for the container. | object | undefined | | src (required) | Bodymovin JSON data or URL to JSON. | object | string| undefined |

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

import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.player = React.createRef(); // initialize your ref
  }
  render() {
    return (
      <Player
        ref={this.player} // set the ref to your class instance
        autoplay={false}
        loop={true}
        controls={true}
        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
        style={{ height: '300px', width: '300px' }}
      ></Player>
    );
  }
}

export 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.

import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { lottie: null }; // initialize your state
  }

  render() {
    return (
      <Player
        lottieRef={instance => {
          this.setState({ lottie: instance }); // the lottie instance is returned in the argument of this prop. set it to your local state
        }}
        autoplay={false}
        loop={true}
        controls={true}
        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
        style={{ height: '300px', width: '300px' }}
      ></Player>
    );
  }
}

export default App;

Listening for events

import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.player = React.createRef();
  }

  doSomething() {
    this.player.current.play(); // make use of the player and call methods
  }

  render() {
    return (
      <Player
        onEvent={event => {
          if (event === 'load') this.doSomething(); // check event type and do something
        }}
        ref={this.player}
        autoplay={false}
        loop={true}
        controls={true}
        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
        style={{ height: '300px', width: '300px' }}
      ></Player>
    );
  }
}

export 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

MIT License © LottieFiles.com