Add steps hook

packages/components/src/Appear.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import Steps from './Steps'
+import useSteps from './useSteps'
 
-export const Appear = props => {
+export const _Appear = props => {
   const arr = React.Children.toArray(props.children)
   return (
     <Steps
@@ -23,4 +24,21 @@ export const Appear = props => {
   )
 }
 
+export const Appear = props => {
+  const arr = React.Children.toArray(props.children)
+  const step = useSteps(arr.length)
+  const children = arr.map((child, i) =>
+    i < step
+      ? child
+      : React.cloneElement(child, {
+          style: {
+            ...child.props.style,
+            visibility: 'hidden',
+          },
+        })
+  )
+
+  return <>{children}</>
+}
+
 export default Appear

packages/components/src/index.js

@@ -5,3 +5,4 @@ export { Notes } from './Notes'
 export { Steps } from './Steps'
 export { Appear } from './Appear'
 export { withContext, useDeck } from './context'
+export useSteps from './useSteps'

packages/components/src/useSteps.js

@@ -0,0 +1,12 @@
+import { useContext, useMemo } from 'react'
+import { Context } from './context'
+
+export default length => {
+  const context = useContext(Context)
+  const { register, index, step } = context
+  useMemo(() => {
+    register(index, { steps: length })
+  }, [length])
+
+  return step
+}