chore: convert some examples to new useTransition signature

Author: aleclarson

demos/hooks/masonry-grid/index.js

@@ -30,7 +30,8 @@ export default function App() {
     : []
 
   const trail = FAST_MODE ? 25 : 80
-  const transitions = useTransition(gridItems, item => item.css, {
+  const transition = useTransition(gridItems, {
+    key: item => item.css,
     from: ({ xy, width, height }) => ({
       xy,
       width,
@@ -55,9 +56,8 @@ export default function App() {
         set(items.length ? [] : data)
       }}>
       <div {...bind} className="mgrid-list">
-        {transitions.map(({ item, props: { xy, scale, ...rest }, key }) => (
+        {transition(({ xy, scale, ...rest }, item) => (
           <a.div
-            key={key}
             style={{
               transform: to(
                 [xy, scale],

demos/hooks/notification-hub/index.js

@@ -17,7 +17,8 @@ function MessageHub({
   const [cancelMap] = useState(() => new WeakMap())
   const [items, setItems] = useState([])
 
-  const transitions = useTransition(items, item => item.key, {
+  const transition = useTransition(items, {
+    key: item => item.key,
     from: { opacity: 0, height: 0, life: '100%' },
     enter: item => async (next, stop) => {
       if (DEBUG) console.log(`  Entering:`, item.key)
@@ -49,8 +50,8 @@ function MessageHub({
 
   return (
     <Container>
-      {transitions.map(({ key, item, props: { life, ...style } }) => (
-        <Message key={key} style={style}>
+      {transition(({ life, ...style }, item) => (
+        <Message style={style}>
           <Content ref={ref => ref && refMap.set(item, ref)}>
             <Life style={{ right: life }} />
             <p>{item.msg}</p>

demos/hooks/simple-transition/index.js

@@ -26,7 +26,7 @@ export default function App() {
     () => set(state => (state === 2 ? 0 : state + 1)),
     []
   )
-  const transitions = useTransition(index, null, {
+  const transition = useTransition(index, {
     from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
     initial: { opacity: 1, transform: 'translate3d(0%,0,0)' },
     enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
@@ -37,9 +37,9 @@ export default function App() {
 
   return (
     <div className="simple-trans-main" onClick={onClick}>
-      {transitions.map(({ item, props, key }) => {
+      {transition((props, item) => {
         const Page = pages[item]
-        return <Page key={key} style={props} />
+        return <Page style={props} />
       })}
     </div>
   )