#03: Compound Components

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,5 +1,13 @@
-import React, { useState, useEffect } from 'react'
+import React, {
+  useState,
+  useEffect,
+  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'
 
@@ -106,7 +114,10 @@ const initialState = {
   isClicked: false
 }
 
-const MediumClap = () => {
+const MediumClapContext = createContext()
+const { Provider } = MediumClapContext
+
+const MediumClap = ({ children }) => {
   const MAXIMUM_USER_CLAP = 50
   const [clapState, setClapState] = useState(initialState)
   const { count, countTotal, isClicked } = clapState
@@ -123,12 +134,21 @@ const MediumClap = () => {
     })
   }
 
+  const memoizedValue = useMemo(
+    () => ({
+      count,
+      countTotal,
+      isClicked
+    }),
+    [count, countTotal, isClicked]
+  )
+
   return (
-    <button id='clap' className={styles.clap} onClick={handleClapClick}>
-      <ClapIcon isClicked={isClicked} />
-      <ClapCount count={count} />
-      <CountTotal countTotal={countTotal} />
-    </button>
+    <Provider value={memoizedValue}>
+      <button id='clap' className={styles.clap} onClick={handleClapClick}>
+        {children}
+      </button>
+    </Provider>
   )
 }
 
@@ -137,7 +157,8 @@ const MediumClap = () => {
 Smaller Component used by <MediumClap />
 ==================================== **/
 
-const ClapIcon = ({ isClicked }) => {
+const ClapIcon = () => {
+  const { isClicked } = useContext(MediumClapContext)
   return (
     <span>
       <svg
@@ -152,29 +173,52 @@ const ClapIcon = ({ isClicked }) => {
     </span>
   )
 }
-const ClapCount = ({ count }) => {
+const ClapCount = () => {
+  const { count } = useContext(MediumClapContext)
   return (
     <span id='clapCount' className={styles.count}>
       +{count}
     </span>
   )
 }
-const CountTotal = ({ countTotal }) => {
+const CountTotal = () => {
+  const { countTotal } = useContext(MediumClapContext)
   return (
     <span id='clapCountTotal' 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 = () => {
-  return <MediumClap />
+  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"