react-spring

v9.4.2

<p align="center"> <img src="https://i.imgur.com/QZownhg.png" width="240" /> </p>

NPM

README

GitHub

MIT

Latest version published 5 days ago

    npm install react-spring

Explore Similar Packages

Package Health Score

95 / 100

Popularity
Influential project
Maintenance
Healthy
Security
No known security issues
Community
Active

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Secure Your Project

Find & fix vulnerable dependencies and insecure code

Popularity

Influential project

Weekly Downloads (591,844)

Dependents: 21
GitHub Stars: 22.12K
Forks: 963
Contributors: 140

Direct Usage Popularity

The npm package react-spring receives a total of 591,844 downloads a week. As such, we scored react-spring popularity level to be Influential project.

Based on project statistics from the GitHub repository for the npm package react-spring, we found that it has been starred 22,124 times, and that 21 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Popular

Version

Release Date

12/2018

02/2019

06/2019

12/2021

01/2022

Direct Vulnerabilities

Popular

Indirect Vulnerabilities

Popular

License Risk

Popular

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

MIT

Security Policy

We found a way for you to contribute to the project! Looks like react-spring is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

    # Install the Snyk CLI and test your project
npm i snyk -g && snyk test react-spring

Keep your project free of vulnerabilities with Snyk

Maintenance

Healthy

Commit Frequency

Open Issues: 40
Open PR: 1
Last Release: 5 days ago
Last Commit: 5 days ago

Further analysis of the maintenance status of react-spring based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that react-spring demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Community

Active

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: No
Contributors: 140
Funding: Yes

A good and healthy external contribution signal for react-spring project, which invites more than one hundred open source maintainers to collaborate on the repository.

We found a way for you to contribute to the project! Looks like react-spring is missing a Code of Conduct.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 4 years
Dependencies: 6 Direct
Versions: 354
Install Size: 7.67 kB
Dist-tags: 6
# of Files: 9
Maintainers: 2
TS Typings: Yes

react-spring has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Not sure how to use react-spring?

To help you get started, we've collected the most common ways that react-spring is being used within popular public projects.

react-spring / react-spring-examples / demos / hooks / auto / index.js View on Github

export default function App() {
  const [open, toggle] = useState(false)
  const [bind, { width }] = useMeasure()
  const props = useSpring({ width: open ? width : 0, onFrame: v => console.log(v) })
  return (
    <div className="auto-container" {...bind} onClick={() => toggle(!open)}>
      <animated.div className="auto-fill" style={props} />
      <animated.div className="auto-content">
        {props.width.interpolate(x => `${x.toFixed(0)}px`)}
      </animated.div>
    </div>
  )
}

View more ways to use react-spring

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's animated and Cheng Lou's react-motion. It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use. But while animated is mostly imperative and react-motion mostly declarative, react-spring bridges both. You will be surprised how easy static data is cast into motion with small, explicit utility functions that don't necessarily affect how you form your views.

Installation

npm install react-spring

Documentation and Examples

More info about the project can be found here.

Examples and tutorials can be found here.

Why springs and not durations

The principle you will be working with is called a spring, it does not have a defined curve or a set duration. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.

We are so used to time-based animation that we believe that struggle is normal, dealing with arbitrary curves, easings, time waterfalls, not to mention getting this all in sync. As Andy Matuschak (ex Apple UI-Kit developer) expressed it once: Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity.

Springs change that, animation becomes easy and approachable, everything you do looks and feels natural by default. For a detailed explanation watch this video.

What others say

Used by

And many others ...

Funding

If you like this project, please consider helping out. All contributions are welcome as well as donations to Opencollective, or in crypto:

BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH

ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682

You can also support this project by becoming a sponsor. Your logo will show up here with a link to your website.

Gold sponsors

Other Sponsors

Backers

Thank you to all our backers! 🙏

Contributors

This project exists thanks to all the people who contribute.

react-spring dependencies

@react-spring/core @react-spring/konva @react-spring/native @react-spring/three @react-spring/web @react-spring/zdog

FAQs

What is react-spring?

<p> </p>. Visit Snyk Advisor to see a full health score report for react-spring, including popularity, security, maintenance & community analysis.

Is react-spring popular?

The npm package react-spring receives a total of 591,844 weekly downloads. As such, react-spring popularity was classified as an influential project. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-spring well maintained?

We found that react-spring demonstrated a healthy version release cadence and project activity. It has a community of 140 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is react-spring safe to use?

The npm package react-spring was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 18 January-2022, at 01:02 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Secure Your Project

Weekly Downloads (591,844)

Direct Usage Popularity

Security and license risk for significant versions

Version

Release Date

Direct Vulnerabilities

Indirect Vulnerabilities

License Risk

Commit Frequency

Embed Package Health Score Badge

Not sure how to use react-spring?

Installation

Documentation and Examples

Why springs and not durations

What others say

Used by

Funding

Gold sponsors

Other Sponsors

Backers

Contributors

react-spring dependencies

FAQs

What is react-spring?

Is react-spring popular?

Is react-spring well maintained?

Is react-spring safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues