fix docz build

Author: drcmda

documentation/useChain.mdx

@@ -14,38 +14,36 @@ import examples from '../examples/components/examples-hooks'
 import { useChain, animated } from 'react-spring'
 ```
 
-useSprings manages multiple springs. Use it whenever you have an arry of values that you want to animate (static lists, etc). It behaves exactly like [useSpring](/useSpring) with the distinction that you supply a count as the first argument, while the spring config is given for each item, either functionally, or as an array. 
+The useChain hook allows you to set the execution order of previously defined animation-hooks, where one animation starts after the other in sequence. In order to do this you have to collect refs off the hooks you want to chain. A ref contains a managing instance with start/stop functionality (which you could call yourself if you wanted to). A hook that has given its ref will not start on its own from there on. The order in which you animate can be changed in subsequent render passes. 
 
-### Either: overwrite values to change the animation
-
-If you re-render the component with changed props, the animation will update.
+useChain does not change how you form your views otherwise, you can use the output you get from animation-hooks in the same manner as before.
 
 ```jsx
-const springs = useSprings(items.length, items.map(item => ({ opacity: item.opacity }))
+// Build a spring and catch its ref
+const springRef = useRef()
+const props = useSpring({ ...values, ref: springRef })
+// Build a transition and catch its ref
+const transitionRef = useRef()
+const transitions = useTransition({ ...values, ref: transitionRef })
+// First run the spring, when it concludes run the transition
+useChain([springRef, transitionRef])
+// Use the animated props like always
+return (
+  <animated.div style={props}>
+    {transitions.map(({ item, key, props }) =>
+      <animated.div key={key} style={props} />)}
+  </animated.div>
+)
 ```
 
-### Or: pass a function that returns values, and update using "set"
-
-You will get a `set(Values)` function back, use it to update the animation. This will not cause the component to render, which can be generally more performant. It also prevents configs from being re-created on every render. Handling updates like this is extremely useful for fast-occurring updates, like event streams, mousemoves, etc.
+If a sequence isn't what you want you can optionally define timeSteps and a timeFrame (which defaults to a second). timeSteps is just an array with offsets between 0-1 that correspend to beginning and the end of the timeFrame.
 
 ```jsx
-const [springs, set] = useSprings(items.length, index => ({ opacity: items[index].opacity }))
-// ...
-set(index => ({ opacity: items[index].opacity }))
+// The spring will start right away
+// The transition will start after 0.5 * 1000ms (the timeFrame default) = 500ms
+useChain([springRef, transitionRef], [0, 0.5])
 ```
 
-### Finally: distribute animated props among the view
-
-The return value is an array containing animated props.
-
-```jsx
-return springs.map(item => <animated.div style={props} />)
-```
-
-## Properties
-
-All properties of the [shared-api](/api) apply.
-
 ## Demos
 
 <DemoGrid padding={0}>

documentation/useSprings.mdx

@@ -39,7 +39,7 @@ set(index => ({ opacity: items[index].opacity }))
 The return value is an array containing animated props.
 
 ```jsx
-return springs.map(item => <animated.div style={props} />)
+return springs.map(props => <animated.div style={props} />)
 ```
 
 ## Properties

documentation/useTrail.mdx

@@ -14,32 +14,32 @@ import examples from '../examples/components/examples-hooks'
 import { useTrail, animated } from 'react-spring'
 ```
 
-useSprings manages multiple springs. Use it whenever you have an arry of values that you want to animate (static lists, etc). It behaves exactly like [useSpring](/useSpring) with the distinction that you supply a count as the first argument, while the spring config is given for each item, either functionally, or as an array. 
+useTrail needs the amount of items you want to trail and the props you want to animate. It returns an array of animated-props, which you can then distribute among your views.
 
 ### Either: overwrite values to change the animation
 
 If you re-render the component with changed props, the animation will update.
 
 ```jsx
-const springs = useSprings(items.length, items.map(item => ({ opacity: item.opacity }))
+const trail = useTrail(items.length, { opacity: 1, from: { opacity: 0 } })
 ```
 
 ### Or: pass a function that returns values, and update using "set"
 
 You will get a `set(Values)` function back, use it to update the animation. This will not cause the component to render, which can be generally more performant. It also prevents configs from being re-created on every render. Handling updates like this is extremely useful for fast-occurring updates, like event streams, mousemoves, etc.
 
 ```jsx
-const [springs, set] = useSprings(items.length, index => ({ opacity: items[index].opacity }))
+const [trail, set] = useTrail(items.length, () => ({ opacity: 1, from: { opacity: 0 } }))
 // ...
-set(index => ({ opacity: items[index].opacity }))
+set({ opacity: 0 })
 ```
 
 ### Finally: distribute animated props among the view
 
 The return value is an array containing animated props.
 
 ```jsx
-return springs.map(item => <animated.div style={props} />)
+return trail.map(props => <animated.div style={props} />)
 ```
 
 ## Properties

doczrc.js

@@ -148,7 +148,7 @@ export default {
         ...config.module,
         rules: [
           ...config.module.rules,
-          //{ test: () => true, sideEffects: true },
+          { test: () => true, sideEffects: true },
         ],
       },
       resolve: {

examples/CNAME

@@ -1 +1 @@
-react-spring.surge.sh
+react-spring-hooks.surge.sh

examples/demos/chain-animation/index.js

@@ -16,7 +16,7 @@ export default function App() {
   const springRef = useRef()
   const { size, opacity, ...rest } = useSpring({
     from: { size: '20%', background: 'hotpink' },
-    size: open ? '100%' : '20%',
+    size: open ? '80%' : '20%',
     background: open ? 'white' : 'hotpink',
     config: { ...config.stiff, precision: 0.01 },
     ref: springRef,
@@ -61,19 +61,21 @@ const Main = styled('div')`
   align-items: center;
   justify-content: center;
   padding: 20px;
+  box-sizing: border-box;
 `
 
 const Sidebar = styled(animated.div)`
   position: relative;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
   grid-gap: 20px;
   padding: 20px;
   background: white;
   border-radius: 5px;
   cursor: pointer;
   will-change: width, height;
   box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
 `
 
 const Content = styled(animated.div)`
@@ -93,8 +95,5 @@ const Item = styled(animated.div)`
   height: 100%;
   background: white;
   border-radius: 5px;
-  background-image: url(https://images.unsplash.com/photo-1544511916-0148ccdeb877?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1901&q=80i);
-  background-size: cover;
-  background-position: center center;
   will-change: transform, opacity;
 `

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "docz": "docz dev",
-    "docz:build": "docz build",
+    "docz:build": "docz build && cp .docz/dist/index.html .docz/dist/200.html && cp examples/CNAME .docz/dist/CNAME",
     "build": "npm-run-all --parallel copy rollup",
     "copy": "copyfiles -f package.json readme.md LICENSE.md \"types/*\" dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.scripts=undefined; this.husky=undefined; this.prettier=undefined; this.jest=undefined; this['lint-staged'] = undefined;\"",
     "rollup": "rollup -c",