share code between hooks and classes

src/classes.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useSpring } from './useSpring'
+import { useTrail } from './useTrail'
+import { useTransition } from './useTransition'
+import { is } from './shared/helpers'
+
+export function Spring({ children, ...props }) {
+  const spring = useSpring(props)
+  return children(spring)
+}
+
+export function Trail({ items, children, ...props }) {
+  const trails = useTrail(items.length, props)
+  return items.map((item, index) => children(item)(trails[index]))
+}
+
+export function Transition({ items, keys = null, children, ...props }) {
+  const transitions = useTransition(items, keys, props)
+  return transitions.map(({ item, key, props, slot }, index) => {
+    const el = children(item, slot, index)(props)
+    return <el.type key={key} {...el.props} />
+  })
+}

src/targets/konva/index.ts

@@ -13,6 +13,8 @@ import { useSpring } from '../../useSpring'
 import { useSprings } from '../../useSprings'
 import { useTrail } from '../../useTrail'
 import { useTransition } from '../../useTransition'
+import { Spring, Trail, Transition } from '../../classes'
+import './globals'
 
 Globals.injectDefaultElement('Group')
 Globals.injectInterpolation(createInterpolation)
@@ -84,4 +86,7 @@ export {
   useTransition,
   useChain,
   useSprings,
+  Spring,
+  Trail,
+  Transition,
 }

src/targets/native/index.ts

@@ -11,6 +11,7 @@ import { useSpring } from '../../useSpring'
 import { useSprings } from '../../useSprings'
 import { useTrail } from '../../useTrail'
 import { useTransition } from '../../useTransition'
+import { Spring, Trail, Transition } from '../../classes'
 import AnimatedTransform from './AnimatedTransform'
 
 Globals.injectDefaultElement(View)
@@ -42,4 +43,7 @@ export {
   useTransition,
   useChain,
   useSprings,
+  Spring,
+  Trail,
+  Transition,
 }

src/targets/universal/index.ts

@@ -10,6 +10,7 @@ import { useSpring } from '../../useSpring'
 import { useSprings } from '../../useSprings'
 import { useTrail } from '../../useTrail'
 import { useTransition } from '../../useTransition'
+import { Spring, Trail, Transition } from '../../classes'
 
 // Problem: https://github.com/animatedjs/animated/pull/102
 // Solution: https://stackoverflow.com/questions/638565/parsing-scientific-notation-sensibly/658662
@@ -49,4 +50,7 @@ export {
   useTransition,
   useChain,
   useSprings,
+  Spring,
+  Trail,
+  Transition,
 }

src/targets/web/index.ts

@@ -10,7 +10,7 @@ import { useSpring } from '../../useSpring'
 import { useSprings } from '../../useSprings'
 import { useTrail } from '../../useTrail'
 import { useTransition } from '../../useTransition'
-import './globals'
+import { Spring, Trail, Transition } from '../../classes'
 
 type JSXElements = keyof JSX.IntrinsicElements
 
@@ -172,4 +172,7 @@ export {
   useTransition,
   useChain,
   useSprings,
+  Spring,
+  Trail,
+  Transition,
 }