Installations

npm install react-smooth

Pull Requests

Open

1

Total

76

Closed

29

Merged

46

Issues

Open

5

Total

25

Closed

20

Releases

3

v4.0.1

Published on 21 Mar 2024

v4.0.0

Published on 29 Jan 2024

v3.0.0

Published on 18 Oct 2023

View all 3 releases

Developer

recharts

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

16.14.2

NPM Version

8.5.0 Statistics

280 Stars

292 Commits

38 Forks

15 Watching

2 Branches

19 Contributors

Updated on 27 Nov 2024

Languages

TypeScript (52.78%)

JavaScript (45.18%)

Shell (2.04%)

Total Downloads

Cumulative downloads

Total Downloads

260,749,202

Last day

0.7%

450,415

Compared to previous day

Last week

6.3%

2,325,927

Compared to previous week

Last month

14.5%

9,491,119

Compared to previous month

Last year

41.6%

86,789,486

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

fast-equals react-transition-group prop-types

Peer Dependencies

2

react react-dom

Dev Dependencies

37

Versions

react-smooth

react-smooth is a animation library work on React.

install

npm install --save react-smooth

Usage

simple animation

1<Animate to="0" from="1" attributeName="opacity">
2  <div />
3</Animate>

steps animation

1const steps = [{
2  style: {
3    opacity: 0,
4  },
5  duration: 400,
6}, {
7  style: {
8    opacity: 1,
9    transform: 'translate(0, 0)',
10  },
11  duration: 1000,
12}, {
13  style: {
14    transform: 'translate(100px, 100px)',
15  },
16  duration: 1200,
17}];
18
19<Animate steps={steps}>
20  <div />
21</Animate>

children can be a function

1<Animate from={{ opacity: 0 }}
2  to={{ opacity: 1 }}
3  easing="ease-in"
4  >
5  {
6    ({ opacity }) => <div style={{ opacity }}></div>
7  }
8</Animate>

you can configure js timing function

1const easing = configureBezier(0.1, 0.1, 0.5, 0.8);
2const easing = configureSpring({ stiff: 170, damping: 20 });

group animation

1const appear = {
2  from: 0,
3  to: 1,
4  attributeName: 'opacity',
5};
6
7const leave = {
8  steps: [{
9    style: {
10      transform: 'translateX(0)',
11    },
12  }, {
13    duration: 1000,
14    style: {
15      transform: 'translateX(300)',
16      height: 50,
17    },
18  }, {
19    duration: 2000,
20    style: {
21      height: 0,
22    },
23  }]
24}
25
26<AnimateGroup appear={appear} leave={leave}>
27  { list }
28</AnimateGroup>
29
30/*
31 *  @description: add compatible prefix in style
32 *
33 *  style = { transform: xxx, ...others };
34 *
35 *  translatedStyle = {
36 *    WebkitTransform: xxx,
37 *    MozTransform: xxx,
38 *    OTransform: xxx,
39 *    msTransform: xxx,
40 *    ...others,
41 *  };
42 */
43
44const translatedStyle = translateStyle(style);
45
46

API

Animate

name	type	default	description
from	string or object	''	set the initial style of the children
to	string or object	''	set the final style of the children
canBegin	boolean	true	whether the animation is start
begin	number	0	animation delay time
duration	number	1000	animation duration
steps	array	[]	animation keyframes
onAnimationEnd	function	() => null	called when animation is finished
attributeName	string	''	style property
easing	string	'ease'	the animation timing function, support css timing function temporary
isActive	boolean	true	whether the animation is active
children	element		support only child temporary

AnimateGroup

name	type	default	description
appear	object	undefined	configure element appear animation
enter	object	undefined	configure element appear animation
leave	object	undefined	configure element exit animation

License

MIT

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

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

10

Dangerous-Workflow

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

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Code-Review

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

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.

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

Fuzzing

Determines if the project uses fuzzing.

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.

Score

4

/10

Last Scanned on 2024-11-18

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-smooth

Other packages similar to react-smooth

react-smooth

Installations

Pull Requests

1

76

29

46

Issues

5

25

20

Releases

Developer

recharts

Developer Guide

CommonJS

No

16.14.2

8.5.0

Statistics

Languages

Total Downloads

260,749,202

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-smooth

install

Usage

API

Animate

AnimateGroup

License

10

10

10

10

6

0

0

0

0

0

0

0

0

4

/10