Skip to content

Commit 28ef2d1

Browse files
joshuaellisjoshuaellis
committed
chore: update readme for react-spring package
1 parent 4c9d0e8 commit 28ef2d1

File tree

1 file changed

+68
-47
lines changed

1 file changed

+68
-47
lines changed

‎packages/react-spring/README.md

Lines changed: 68 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,93 @@
22
<img src="https://i.imgur.com/QZownhg.png" width="240" />
33
</p>
44

5-
<br />
6-
<br />
75
<br />
86

9-
**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.
7+
<h1 align="center">react-spring</h1>
8+
<h3 align="center">A spring-physics first animation library <br>giving you flexible tools to confidently cast your ideas</h3>
109

11-
This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's [animated](https://github.com/animatedjs/animated) and Cheng Lou's [react-motion](https://github.com/chenglou/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.
10+
<br>
1211

13-
[![Build](https://github.com/pmndrs/react-spring/actions/workflows/main.yml/badge.svg?style=flat&colorA=000000&colorB=000000)](https://github.com/pmndrs/react-spring/actions/workflows/main.yml) [![npm version](https://badge.fury.io/js/react-spring.svg)](https://badge.fury.io/js/react-spring) [![Discord Shield](https://discordapp.com/api/guilds/740090768164651008/widget.png?style=shield)](https://discord.gg/ZZjjNvJ) [![Backers on Open Collective](https://opencollective.com/react-spring/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-spring/sponsors/badge.svg)](#sponsors)
12+
<p align="center">
13+
<a href="https://www.npmjs.com/package/react-spring" target="_blank">
14+
<img src="https://img.shields.io/npm/v/react-spring.svg?style=flat&colorA=000000&colorB=000000" />
15+
</a>
16+
<a href="https://www.npmjs.com/package/react-spring" target="_blank">
17+
<img src="https://img.shields.io/npm/dm/react-spring.svg?style=flat&colorA=000000&colorB=000000" />
18+
</a>
19+
<a href="https://discord.gg/ZZjjNvJ" target="_blank">
20+
<img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" alt="Chat on Discord">
21+
</a>
22+
</p>
1423

15-
### Installation
24+
<br>
1625

17-
npm install react-spring
26+
`react-spring` is a cross-platform spring-physics first animation library.
1827

19-
### Documentation and Examples
28+
It's as simple as:
2029

21-
More info about the project can be found [here](https://www.react-spring.io).
30+
```jsx
31+
const styles = useSpring({
32+
from: {
33+
opacity: 0
34+
},
35+
to: {
36+
opacity: 1
37+
}
38+
})
2239

23-
Examples and tutorials can be found [here](https://react-spring.io/basics).
40+
<animated.div style={styles} />
41+
```
2442

25-
---
43+
Just a small bit about us:
2644

27-
## Why springs and not durations
45+
- **Cross-Platform**: We support `react-dom`, `react-native`, `react-three-fiber`, `react-konva` & `react-zdog`.
46+
- **Versatile**: Be declarative with your animations or if you prefer, imperative.
47+
- **Spring-Physics First**: By default animation use springs for fluid interactivity, but we support durations with easings as well.
2848

29-
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.
49+
There's a lot more to be had! Give it a try and find out.
3050

31-
<p align="middle">
32-
<img height="250" src="https://i.imgur.com/7CCH51r.gif" />
33-
</p>
51+
## Getting Started
52+
53+
### ⚡️ Jump Start
54+
55+
```shell
56+
# Install the entire library
57+
npm install react-spring
58+
# or just install your specific target (recommended)
59+
npm install @react-spring/web
60+
```
61+
62+
```jsx
63+
import { animated, useSpring } from '@react-spring/web'
64+
65+
const FadeIn = ({ isVisible, children }) => {
66+
const styles = useSpring({
67+
opacity: isVisible ? 1 : 0,
68+
y: isVisible ? 0 : 24,
69+
})
70+
71+
return <animated.div style={styles}>{children}</animated.div>
72+
}
73+
```
74+
75+
It's as simple as that to create scroll-in animations when value of `isVisible` is toggled.
76+
77+
### 📖 Documentation and Examples
3478

35-
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](https://twitter.com/andy_matuschak/status/566736015188963328): _Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity_.
79+
More documentation on the project can be found [here](https://www.react-spring.io).
3680

37-
Springs change that, animation becomes easy and approachable, everything you do looks and feels natural by default. For a detailed explanation watch [this video](https://www.youtube.com/embed/1tavDv5hXpo?controls=1&start=370).
81+
Pages contain their own [examples](https://react-spring.io/hooks/use-spring#demos) which you can check out there, or [open in codesandbox](https://codesandbox.io/s/github/pmndrs/react-spring/tree/master/demo/src/sandboxes/card) for a more in-depth view!
3882

39-
### What others say
83+
---
84+
85+
## 📣 What others say
4086

4187
<p align="middle">
4288
<img src="assets/testimonies.jpg" />
4389
</p>
4490

45-
### Used by
91+
## Used by
4692

4793
<p align="middle">
4894
<a href="https://nextjs.org/"><img width="285" src="assets/projects/next.png"></a>
@@ -52,40 +98,15 @@ Springs change that, animation becomes easy and approachable, everything you do
5298

5399
And [many others...](https://github.com/pmndrs/react-spring/network/dependents)
54100

55-
## Funding
56-
57-
If you like this project, please consider helping out. All contributions are welcome as well as donations to [Opencollective](https://opencollective.com/react-spring), or in crypto:
58-
59-
BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH
60-
61-
ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682
62-
63-
You can also support this project by becoming a sponsor. Your logo will show up here with a link to your website.
64-
65-
## Gold sponsors
66-
67-
<a href="https://aragon.org/">
68-
<img width="300" src="https://wiki.aragon.org/design/logo/svg/imagetype.svg"/>
69-
</a>
70-
71-
## Other Sponsors
72-
73-
<a href="https://opencollective.com/react-spring/sponsor/0/website" target="_blank">
74-
<img src="https://opencollective.com/react-spring/sponsor/0/avatar.svg"/>
75-
</a>
76-
<a href="https://opencollective.com/react-spring/sponsor/1/website" target="_blank">
77-
<img src="https://opencollective.com/react-spring/sponsor/1/avatar.svg"/>
78-
</a>
79-
80101
## Backers
81102

82-
Thank you to all our backers! 🙏
103+
Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our [Opencollective](https://opencollective.com/react-spring).
83104

84105
<a href="https://opencollective.com/react-spring#backers" target="_blank">
85106
<img src="https://opencollective.com/react-spring/backers.svg?width=890"/>
86107
</a>
87108

88-
### Contributors
109+
## Contributors
89110

90111
This project exists thanks to all the people who contribute.
91112

0 commit comments

Comments
 (0)