fix examples, amend docs, add useSprings section

Author: drcmda

.size-snapshot.json

@@ -80,16 +80,16 @@
     }
   },
   "dist/hooks.js": {
-    "bundled": 80723,
-    "minified": 38373,
-    "gzipped": 12424,
+    "bundled": 80699,
+    "minified": 38363,
+    "gzipped": 12434,
     "treeshaked": {
       "rollup": {
         "code": 16403,
         "import_statements": 341
       },
       "webpack": {
-        "code": 28886
+        "code": 28881
       }
     }
   },
@@ -99,16 +99,16 @@
     "gzipped": 12303
   },
   "dist/native-hooks.js": {
-    "bundled": 72460,
-    "minified": 34159,
-    "gzipped": 10586,
+    "bundled": 72436,
+    "minified": 34149,
+    "gzipped": 10591,
     "treeshaked": {
       "rollup": {
         "code": 10006,
         "import_statements": 345
       },
       "webpack": {
-        "code": 25046
+        "code": 25041
       }
     }
   }

documentation/Hooks.mdx

@@ -144,6 +144,50 @@ return items.map((item, index) => (
   ))}
 </DemoGrid>
 
+## useSprings
+
+ `useSprings(Count, [Values] | index => Values): [animatedProps] | [[animatedProps], set]`
+
+<p>
+ useSprings has a similar api as useTrail, the only distinction is that the springs don't trail, you define individual values for them.
+</p>
+
+<h3>
+  <span className="highlight"><i>Either</i>: overwrite values</span> to change the animation
+</h3>
+
+```jsx
+const props = useSprings(items.length, [{ x: 0 }, { x: 1000 }, { x: 2000 }] })
+```
+
+<h3>
+  <span className="highlight"><i>Or</i>: pass a function</span> that returns values, and update using "set"
+</h3>
+
+```jsx
+const [props, set] = useSprings(items.length, index => ({ x: index * 1000 } }))
+```
+
+<h3>
+  <span className="highlight"><i>Finally</i>: distribute animated props</span> among the view
+</h3>
+
+```jsx
+return items.map((item, index) => (
+  <animated.div key={item.key} style={props[index]}>{item.content}</animated.div>
+)
+```
+
+<DemoGrid padding={0}>
+  {examples.filter(data => data.tags.includes('useSprings')).map(data => (
+    <Demo
+      key={data.name}
+      {...data}
+      import={import('../examples/demos/' + data.name)}
+    />
+  ))}
+</DemoGrid>
+
 ## useTransition
 
  `useTransition(Config): [{ item, key, props, state }]`

examples/components/examples-hooks.js

@@ -72,7 +72,7 @@ return <animated.div style={{ transform }} children="Slide">`,
     name: 'hooks/draggable-list',
     title: 'Draggable list',
     link: 'https://codesandbox.io/embed/r5qmj8m6lq',
-    tags: ['useTrail'],
+    tags: ['useSprings'],
   },
   {
     name: 'hooks/mouse-parallax',

examples/demos/hooks/keyframes-script/index.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react'
 import { useKeyframes, animated } from 'react-spring/hooks'
 import './styles.css'
-import { useChain } from '../../../../dist/hooks'
 
 const useScript = useKeyframes.spring(async next => {
   while (true) {

package.json

@@ -104,7 +104,7 @@
     "react-testing-library": "5.2.0",
     "react-transition-group": "2.5.0",
     "react-twitter-widgets": "1.7.1",
-    "react-with-gesture": "2.0.4",
+    "react-with-gesture": "4.0.0",
     "rimraf": "2.6.2",
     "rollup": "0.66.6",
     "rollup-plugin-babel": "4.0.3",

yarn.lock

@@ -13051,10 +13051,10 @@ [email protected]:
     prop-types "^15.3.0"
     scriptjs "^2.5.8"
 
-react-with-gesture@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/react-with-gesture/-/react-with-gesture-2.0.4.tgz#3b1095b55b937d0ca89b9d4570bc35c1e3238236"
-  integrity sha512-SeXrbhj0NQ/NZh3GhPj6j8OGPGjBem6L79JYf37+AuapMVPuOh9ehoBblhc+C5Yq8aduQn/pB2uB4tKE3LrEAw==
+react-with-gesture@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-with-gesture/-/react-with-gesture-4.0.0.tgz#2ef465e6118c79abc0916368df0de6d1485b2d5d"
+  integrity sha512-+7WjnIiqvhW/ViZZxg+kKa9R4evq/PrZuEOo7x/uxWqojPgX1tLfaAlLR+8XlzIS1U0tEJ2ap9nPDe5wOsAccg==
 
 [email protected]:
   version "16.7.0-alpha.2"