#02 - The Medium Clap (with useClapAnimation)

showcase/package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@reach/router": "^1.2.1",
     "mo-js": "^0.288.2",
+    "number-to-words": "^1.2.4",
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",

showcase/src/patterns/index.css

@@ -78,4 +78,12 @@
     fill: #27ae60;
     stroke: #fff;
     stroke-width: 1px;
+}
+
+/* Clap Info */
+.info {
+  position: absolute;
+  left: -20px;
+  right: -20px;
+  bottom: -50px;
 }

showcase/src/patterns/index.js

@@ -1,23 +1,40 @@
-import React, { Component, useState } from 'react'
+import React, {
+  useState,
+  useCallback,
+  useLayoutEffect,
+  useContext,
+  useMemo,
+  createContext
+} from 'react'
+
 import mojs from 'mo-js'
+import wordConverter from 'number-to-words'
 import { generateRandomNumber } from '../utils/generateRandomNumber'
 import styles from './index.css'
 
 /** ====================================
- *          🔰HOC
-Higher Order Component for Animation
+ *          🔰Hook
+      Hook for Animation
 ==================================== **/
-const withClapAnimation = WrappedComponent => {
-  class WithClapAnimation extends Component {
-    state = {
-      animationTimeline: new mojs.Timeline()
-    }
 
-    componentDidMount () {
-      const tlDuration = 300
+const useClapAnimation = ({
+  duration: tlDuration,
+  bounceEl,
+  fadeEl,
+  burstEl
+}) => {
+  const [animationTimeline, setAnimationTimeline] = useState(
+    new mojs.Timeline()
+  )
+
+  useLayoutEffect(
+    () => {
+      if (!bounceEl || !fadeEl || !burstEl) {
+        return
+      }
 
       const triangleBurst = new mojs.Burst({
-        parent: '#clap',
+        parent: burstEl,
         radius: { 50: 95 },
         count: 5,
         angle: 30,
@@ -36,7 +53,7 @@ const withClapAnimation = WrappedComponent => {
       })
 
       const circleBurst = new mojs.Burst({
-        parent: '#clap',
+        parent: burstEl,
         radius: { 50: 75 },
         angle: 25,
         duration: tlDuration,
@@ -51,7 +68,7 @@ const withClapAnimation = WrappedComponent => {
       })
 
       const countAnimation = new mojs.Html({
-        el: '#clapCount',
+        el: bounceEl,
         isShowStart: false,
         isShowEnd: true,
         y: { 0: -30 },
@@ -64,7 +81,7 @@ const withClapAnimation = WrappedComponent => {
       })
 
       const countTotalAnimation = new mojs.Html({
-        el: '#clapCountTotal',
+        el: fadeEl,
         isShowStart: false,
         isShowEnd: true,
         opacity: { 0: 1 },
@@ -74,44 +91,35 @@ const withClapAnimation = WrappedComponent => {
       })
 
       const scaleButton = new mojs.Html({
-        el: '#clap',
+        el: burstEl,
         duration: tlDuration,
         scale: { 1.3: 1 },
         easing: mojs.easing.out
       })
 
-      const clap = document.getElementById('clap')
-      clap.style.transform = 'scale(1, 1)'
-      this.state.animationTimeline.add([
+      if (typeof burstEl === 'string') {
+        clap.style.transform = 'scale(1, 1)'
+        const el = document.getElementById(id)
+        el.style.transform = 'scale(1, 1)'
+      } else {
+        burstEl.style.transform = 'scale(1, 1)'
+      }
+
+      const updatedAnimationTimeline = animationTimeline.add([
         countAnimation,
         countTotalAnimation,
         scaleButton,
         circleBurst,
         triangleBurst
       ])
-    }
-
-    render () {
-      return (
-        <WrappedComponent
-          animationTimeline={this.state.animationTimeline}
-          {...this.props}
-        />
-      )
-    }
-  }
 
-  WithClapAnimation.displayName = `WithClapAnimation(${getDisplayName(
-    WrappedComponent
-  )})`
-
-  return WithClapAnimation
-}
+      setAnimationTimeline(updatedAnimationTimeline)
+    },
+    [tlDuration, animationTimeline, bounceEl, fadeEl, burstEl]
+  )
 
-function getDisplayName (WrappedComponent) {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
+  return animationTimeline
 }
-
 /** ====================================
  *      🔰 MediumClap
 ==================================== **/
@@ -121,13 +129,33 @@ const initialState = {
   isClicked: false
 }
 
-const MediumClap = ({ animationTimeline }) => {
+const MediumClapContext = createContext()
+const { Provider } = MediumClapContext
+
+const MediumClap = ({ children }) => {
   const MAXIMUM_USER_CLAP = 50
   const [clapState, setClapState] = useState(initialState)
   const { count, countTotal, isClicked } = clapState
 
+  const [{ clapRef, clapCountRef, clapTotalRef }, setRefState] = useState({})
+
+  const setRef = useCallback(node => {
+    if (node !== null) {
+      setRefState(prevRefState => ({
+        ...prevRefState,
+        [node.dataset.refkey]: node
+      }))
+    }
+  }, [])
+
+  const animationTimeline = useClapAnimation({
+    duration: 300,
+    bounceEl: clapCountRef,
+    fadeEl: clapTotalRef,
+    burstEl: clapRef
+  })
+
   const handleClapClick = () => {
-    // 👉 prop from HOC
     animationTimeline.replay()
 
     setClapState({
@@ -137,12 +165,27 @@ const MediumClap = ({ animationTimeline }) => {
     })
   }
 
+  const memoizedValue = useMemo(
+    () => ({
+      count,
+      countTotal,
+      isClicked,
+      setRef
+    }),
+    [count, countTotal, isClicked, setRef]
+  )
+
   return (
-    <button id='clap' className={styles.clap} onClick={handleClapClick}>
-      <ClapIcon isClicked={isClicked} />
-      <ClapCount count={count} />
-      <CountTotal countTotal={countTotal} />
-    </button>
+    <Provider value={memoizedValue}>
+      <button
+        ref={setRef}
+        data-refkey='clapRef'
+        className={styles.clap}
+        onClick={handleClapClick}
+      >
+        {children}
+      </button>
+    </Provider>
   )
 }
 
@@ -151,7 +194,8 @@ const MediumClap = ({ animationTimeline }) => {
 Smaller Component used by <MediumClap />
 ==================================== **/
 
-const ClapIcon = ({ isClicked }) => {
+const ClapIcon = () => {
+  const { isClicked } = useContext(MediumClapContext)
   return (
     <span>
       <svg
@@ -166,30 +210,52 @@ const ClapIcon = ({ isClicked }) => {
     </span>
   )
 }
-const ClapCount = ({ count }) => {
+const ClapCount = () => {
+  const { count, setRef } = useContext(MediumClapContext)
   return (
-    <span id='clapCount' className={styles.count}>
+    <span ref={setRef} data-refkey='clapCountRef' className={styles.count}>
       +{count}
     </span>
   )
 }
-const CountTotal = ({ countTotal }) => {
+const CountTotal = () => {
+  const { countTotal, setRef } = useContext(MediumClapContext)
   return (
-    <span id='clapCountTotal' className={styles.total}>
+    <span ref={setRef} data-refkey='clapTotalRef' className={styles.total}>
       {countTotal}
     </span>
   )
 }
 
+const ClapInfo = () => {
+  const { countTotal } = useContext(MediumClapContext)
+  return (
+    <div className={styles.info}>
+      {wordConverter.toWords(countTotal)} claps!
+    </div>
+  )
+}
+
+MediumClap.Icon = ClapIcon
+MediumClap.Count = ClapCount
+MediumClap.Total = CountTotal
+MediumClap.Info = ClapInfo
+
 /** ====================================
     *        🔰USAGE
     Below's how a potential user
     may consume the component API
 ==================================== **/
 
 const Usage = () => {
-  const AnimatedMediumClap = withClapAnimation(MediumClap)
-  return <AnimatedMediumClap />
+  return (
+    <MediumClap>
+      <MediumClap.Icon />
+      <MediumClap.Total />
+      <MediumClap.Count />
+      <MediumClap.Info />
+    </MediumClap>
+  )
 }
 
 export default Usage

showcase/yarn.lock

@@ -4467,6 +4467,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+number-to-words@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/number-to-words/-/number-to-words-1.2.4.tgz#e0f124de9628f8d86c4eeb89bac6c07699264501"
+  integrity sha512-/fYevVkXRcyBiZDg6yzZbm0RuaD6i0qRfn8yr+6D0KgBMOndFPxuW10qCHpzs50nN8qKuv78k8MuotZhcVX6Pw==
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"