npmpackage.info

Gathering detailed insights and metrics for react-lottie-hook

Other packages similar to react-lottie-hook

lottie-react

2.4.0

Lottie for React

lottie-web

5.12.2

After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript

lottie-react-native

7.1.0

React Native bindings for Lottie

react-lottie

1.2.9

lottie animation view for React

Gathering detailed insights and metrics for react-lottie-hook

react-lottie-hook

https://hanorine.github.io/react-lottie-hook

0.5.0

TypeScript

293,743 2.2

Installations

npm install react-lottie-hook

Pull Requests

Open

0

Total

3

Closed

0

Merged

3

Issues

Open

0

Total

1

Closed

1

Releases

Storybook

0.4.0

Published on 19 Sept 2021

View all 1 releases

Developer

JaysQubeXon

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>= 12

Typescript Support

Yes

Node Version

14.17.6

NPM Version

6.14.15 Statistics

5 Stars

62 Commits

1 Forks

1 Watching

3 Branches

4 Contributors

Updated on 23 Jun 2022

Languages

TypeScript (92.52%)

JavaScript (5.55%)

CSS (1.93%)

Total Downloads

Cumulative downloads

Total Downloads

293,743

Last day

-10.3%

148

Compared to previous day

Last week

-1%

812

Compared to previous week

Last month

67.1%

3,637

Compared to previous month

Last year

-30.4%

50,412

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

react-lottie-hook

Lottie react hook with runtime animation controls.

codesandbox · storybook

Introduction

Lottie is a library for the Web, Android and iOS that parses Adobe After Effects animations through a plugin called bodymovin and exported as JSON; rendering natively on each platform.

Getting Started

Add it with your prefered package manager:

yarn add react-lottie-hook

npm i react-lottie-hook

Usage Instructions

This library main exports a useLottie hook and supplies also a standard Lottie component but you are not required to use the latter.

The useLottie hook requires a configuration object of type LottieConfig to be supplied to it and in return you will get an array with a ref to the animation container, state of the animation and the control actions, respectively.

1import React from "react";
2import { useLottie, Lottie } from "react-lottie-hook";
3import animationData from "./animation.json";
4
5const App = () => {
6  const [lottieRef, { isPaused, isStopped }, controls] = useLottie({
7    renderer: "svg",
8    rendererSettings: {
9      preserveAspectRatio: "xMidYMid slice",
10      progressiveLoad: false,
11    },
12    JSON.parse(JSON.stringify(animationData)),
13  });
14
15  return <Lottie lottieRef={ref} width={400} height={400} />;
16};

Due to likely memory leaks it is highly advised to deeply clone the animation object using methods such as lodash.cloneDeep.

The exported Lottie component has a type of LottieProps and the minimum props it requires is a lottieRef from the useLottie hook.

Lottie Component props:

props	type	default
lottieRef:	React.MutableRefObject<HTMLElement \| null>
width?	number	200px
height?	number	200px
style?	object
title?	string
className?	string
ariaRole?	string
ariaLabel?	string
onKeyDown?	(e: React.KeyboardEvent) => void
onClick?	(e: React.MouseEvent<HTMLElement, MouseEvent>)

EventListeners:

Among the options you can pass useLottie is an eventListeners object as follows:

1const eventListeners: EventLisener = {
2  /** triggered only if loop is set to true */
3  loopCompleted: (data) => { console.log('Animation Loop Completed'); },
4  /** triggered when animation is destroyed */
5  destroy: : (data) => { console.log('Animation Destroyed'); },
6  /** triggered when loop is set to false */
7  complete: (data) => { console.log('Animation Complete'); },
8};
9
10const [lottieRef, { isPaused, isStopped }, controls] = useLottie({
11  renderer: "svg",
12  loop: false, // default true
13  rendererSettings: {
14    preserveAspectRatio: "xMidYMid slice",
15    progressiveLoad: false,
16  },
17  animationData,
18  eventListeners,
19});
20

Contributors

_hanorine

_{Alex Billingsley}

_{Arno (H) Welgemoed}

_benito

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.

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

Token-Permissions

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

0

CII-Best-Practices

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

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

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

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

48 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
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-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-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
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-4wx3-54gh-9fr9
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-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
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-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
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

Score

2.2

/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

Other packages similar to react-lottie-hook

Other packages similar to react-lottie-hook

react-lottie-hook

Installations

Pull Requests

0

3

0

3

Issues

0

1

1

Releases

Developer

Developer Guide

CommonJS

>= 12

Yes

14.17.6

6.14.15

Statistics

Languages

Total Downloads

293,743

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-lottie-hook

Introduction

Getting Started

Usage Instructions

EventListeners:

Contributors

10

10

0

0

0

0

0

0

0

0

0

0

0

2.2

/10