React Lottie Loader.

Lottie loader for React.

Introduction

Lottie made animations for web sleek and beautiful and of course let designers to have their boundless creativity and use them in your project, just download or create your own Lottie Files.

Install

via npm

npm i react-lottie-loader

via yarn

yarn add react-lottie-loader

Usage

Create your own or download Lottie files from here Lottie Files.

Import animation data and LottieLoader component.

import React from "react";
import catAnimationData 'src/animation/cat-animation.json';
import LottieLoader 'react-lottie-loader';

function App() {
  return (
    <div>
      <LottieLoader animationData={catAnimationData} />
    </div>
  );
}

export default App;

Props

• animationData: an Object with the exported animation data.
• autoplay: true / false it will start playing as soon as it is ready
• className: css class name to pass the animation container.
• loop: true / false / number
• name: animation name for future reference
• path: the relative path to the animation object. (animationData and path are mutually exclusive)
• renderer: 'svg' / 'canvas' / 'html' to set the renderer

Contributing

Contributions, issues and feature request are welcome! 💜

Fell free to check the issues page

Authors

• David Khierl Gidor

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.1.0 (2023-02-08)

Features

• player ref (2ae648d)

Docs

• :memo: added markdown files (d09cba5)
• :memo: added readme (ea2c0da)
• update readme (ca2be65)

Chore

• release: 1.0.0 (e03337d)
• update deps (46b9d7b)

1.0.0 (2021-01-17)

Docs

• :memo: added markdown files (d09cba5)
• :memo: added readme (ea2c0da)