v9.0.0

README.md

@@ -8,26 +8,31 @@ Demos will be live at http://localhost:8080
 # Contributors
 
 1. clone react-spring and react-spring-examples under the same root folder
-````
+
+```
 /root
   /react-spring
   /react-spring-examples
-````
+```
+
 2. yarn/npm install both
 3. cd react-spring-examples
 4. edit index.js
-````
+
+```
 import examples from './components/examples-tests'
 
 //const DEBUG = false
 const DEBUG = 'latestbug'
-````
+```
+
 5. go to /demos/tests/latestbug and set up a demo that reproduces the problem
 6. npm start, you can now make hot-reload edits in both repos (react-spring and react-spring-examples)
 7. you can test integrity by running all examples, edit index.js again:
-````
+
+```
 import examples from './components/examples-hooks'
 
 const DEBUG = false
 //const DEBUG = 'latestbug'
-````
+```

components/Demo.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Loadable from 'react-loadable'
 import styled from 'styled-components'
 
@@ -9,6 +9,7 @@ class ErrorBoundary extends React.Component {
   }
 
   static getDerivedStateFromError(error) {
+    console.error(error)
     return { hasError: true }
   }
 
@@ -19,7 +20,7 @@ class ErrorBoundary extends React.Component {
 }
 
 export default class Demo extends React.Component {
-  state = { code: undefined, visible: false }
+  state = { visible: false }
   constructor(props) {
     super()
     this.component = Loadable({
@@ -33,19 +34,13 @@ export default class Demo extends React.Component {
 
   setVisible = visible => this.setState({ visible })
 
-  enter = tag =>
-    this.props.code &&
-    this.props.code[tag] &&
-    this.setState({ code: this.props.code[tag] })
-  leave = tag => this.setState({ code: undefined })
-
   render() {
     const {
       title,
       description,
+      code,
       tags,
       link,
-      code,
       overlayCode = true,
       fullscreen = false,
     } = this.props
@@ -62,21 +57,7 @@ export default class Demo extends React.Component {
             </p>
           )}
           {description && <p>{description}</p>}
-          {tags && (
-            <p>
-              {tags.map(tag => (
-                <Tag
-                  key={tag}
-                  children={tag}
-                  onMouseEnter={() => this.enter(tag)}
-                  onMouseLeave={() => this.leave(tag)}
-                  style={{
-                    background: code && code[tag] ? '#5f5f5f' : '#9f9f9f',
-                  }}
-                />
-              ))}
-            </p>
-          )}
+          {tags && <TagList tags={tags} code={code} />}
         </Header>
         <Content>
           <ErrorBoundary>
@@ -98,6 +79,27 @@ export default class Demo extends React.Component {
   }
 }
 
+const TagList = props => {
+  const [code, setCode] = useState(undefined)
+  return (
+    <p>
+      {props.tags.map(tag => (
+        <Tag
+          key={tag}
+          children={tag}
+          onMouseEnter={() =>
+            props.code && props.code[tag] && setCode(props.code[tag])
+          }
+          onMouseLeave={() => setCode(undefined)}
+          style={{
+            background: code && code[tag] ? '#5f5f5f' : '#9f9f9f',
+          }}
+        />
+      ))}
+    </p>
+  )
+}
+
 const Container = styled('div')`
   position: relative;
   width: 100%;
@@ -114,12 +116,12 @@ const Header = styled('div')`
     'Segoe UI Symbol';
 
   & > h1 {
-    margin: 0 0 0.17em 0!important;
-    text-transform: uppercase!important;
-    color: rgba(0, 0, 0, 0.85)!important;
-    font-size: 13.6px!important;
-    font-weight: 500!important;
-    line-height: 19.9px!important;
+    margin: 0 0 0.17em 0 !important;
+    text-transform: uppercase !important;
+    color: rgba(0, 0, 0, 0.85) !important;
+    font-size: 13.6px !important;
+    font-weight: 500 !important;
+    line-height: 19.9px !important;
   }
 
   & > p {

components/examples-hooks.js

@@ -74,6 +74,16 @@ return <animated.div style={{ transform }} children="Slide">`,
     link: 'https://codesandbox.io/embed/r5qmj8m6lq',
     tags: ['useSprings'],
   },
+  // {
+  //   name: 'hooks/inertia',
+  //   title: 'Inertia',
+  //   tags: ['useSprings'],
+  // },
+  // {
+  //   name: 'hooks/clamp-bounce',
+  //   title: 'Clamp bounce',
+  //   tags: ['useSprings'],
+  // },
   {
     name: 'hooks/mouse-parallax',
     title: 'Mouse parallax',
@@ -246,4 +256,10 @@ return items.map(i =>
     link: 'https://codesandbox.io/embed/rloj7nw3pn',
     tags: ['useSpring'],
   },
+  // {
+  //   name: 'hooks/sorted-clicks',
+  //   title: 'Sort items by number of clicks',
+  //   link: 'https://codesandbox.io/embed/rloj7nw3pn',
+  //   tags: ['useSprings'],
+  // },
 ]

components/examples-renderprops.js

@@ -2,157 +2,183 @@ export default [
   {
     name: 'renderprops/parallaxvert',
     title: 'Vertical Parallax',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/parallaxvert',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/parallaxvert',
     tags: ['parallax'],
   },
   {
     name: 'renderprops/parallax',
     title: 'Horizontal Parallax',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/parallax',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/parallax',
     tags: ['parallax'],
   },
   {
     name: 'renderprops/transitions',
     title: 'Transitions',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/transitions',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/transitions',
     tags: ['transitions'],
   },
   {
     name: 'renderprops/nativespring',
     title: 'Native springs',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/nativespring',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/nativespring',
     tags: ['native', 'springs'],
   },
   {
     name: 'renderprops/areas',
     title: 'D3 areas',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/areas',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/areas',
     tags: ['vx', 'd3', 'transitions'],
   },
   {
     name: 'renderprops/trails',
     title: 'Trails',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/trails',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/trails',
     tags: ['trails'],
   },
   {
     name: 'renderprops/pagetransitions',
     title: 'Simple Page transitions',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/pagetransitions',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/pagetransitions',
     tags: ['transitions'],
   },
   {
     name: 'renderprops/reveals',
     title: 'Simple reveals',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/reveals',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/reveals',
     tags: ['transitions'],
   },
   {
     name: 'renderprops/gestures',
     title: 'Gestures',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/gestures',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/gestures',
     tags: ['springs', 'gestures'],
   },
   {
     name: 'renderprops/timing',
     title: 'Scripted keyframes',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/timing',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/timing',
     tags: ['keyframes'],
   },
   {
     name: 'renderprops/simple-spring',
     title: 'Simple spring',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/simple-spring',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/simple-spring',
     tags: ['springs'],
   },
   {
     name: 'renderprops/tree',
     title: 'D3 Tree view',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/tree',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/tree',
     tags: ['d3', 'vx', 'transitions'],
   },
   {
     name: 'renderprops/grid',
     title: 'Grid view',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/grid',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/grid',
     tags: ['transitions', 'trails'],
   },
   {
     name: 'renderprops/list',
     title: 'List re-ordering',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/list',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/list',
     tags: ['transitions'],
   },
   {
     name: 'renderprops/morph',
     title: 'SVG morphing',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/morph',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/morph',
     tags: ['flubber', 'svg', 'springs'],
   },
   {
     name: 'renderprops/sunburst',
     title: 'D3 sunburst',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/sunburst',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/sunburst',
     tags: ['d3', 'vx', 'springs'],
   },
   {
     name: 'renderprops/treeview',
     title: 'Tree view',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/treeview',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/treeview',
     tags: ['springs'],
   },
   {
     name: 'renderprops/keyframes',
     title: 'Panel Keyframes',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/keyframes',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/keyframes',
     tags: ['keyframes', 'springs', 'trails'],
   },
   {
     name: 'renderprops/script',
     title: 'Scripted keyframes',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/script',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/script',
     tags: ['keyframes'],
   },
   {
     name: 'renderprops/auto',
     title: 'Auto',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/auto',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/auto',
     tags: ['springs', 'auto'],
   },
   {
     name: 'renderprops/router',
     title: 'react-router',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/router',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/router',
     tags: ['react-router', 'transitions'],
   },
   {
     name: 'renderprops/scroll',
     title: 'animating scroll',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/scroll',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/scroll',
     tags: ['springs', 'scroll'],
   },
   {
     name: 'renderprops/dashoffset',
     title: 'SVG dashOffset',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/dashoffset',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/dashoffset',
     tags: ['SVG', 'springs'],
   },
   {
     name: 'renderprops/transitiongroup',
     title: 'Multistage transitions',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/transitiongroup',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/transitiongroup',
     tags: ['transitions'],
   },
   {
     name: 'renderprops/chat',
     title: 'Chat',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/chat',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/chat',
     tags: ['transitions'],
   },
   {
     name: 'renderprops/messages',
     title: 'Notifications',
-    link: 'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/notifications',
+    link:
+      'https://github.com/react-spring/react-spring-examples/tree/master/demos/renderprops/notifications',
     tags: ['transitions'],
   },
 ]