feat: compound pattern

Author: wkylin

src/hocs/CompoundPattern/Toggle.jsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+
+const Toggle = ({ children }) => {
+  const [on, setOn] = useState(false)
+  const toggle = () => {
+    setOn(!on)
+  }
+  const getChildProps = () => {
+    return {
+      on,
+      toggle,
+    }
+  }
+  return <>{React.Children.map(children, (child) => React.cloneElement(child, getChildProps()))}</>
+}
+export default Toggle

src/hocs/CompoundPattern/ToggleButton.jsx

@@ -0,0 +1,4 @@
+import React from 'react'
+
+const ToggleButton = ({ on, toggle }) => <button onClick={toggle}>{on ? 'Turn Off' : 'Turn On'}</button>
+export default ToggleButton

src/hocs/CompoundPattern/ToggleMessage.jsx

@@ -0,0 +1,4 @@
+import React from 'react'
+
+const ToggleMessage = ({ on }) => <p>{on ? 'The button is ON' : 'The button is OFF'}</p>
+export default ToggleMessage

src/hocs/CompoundPattern/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Toggle from './Toggle'
+import ToggleButton from './ToggleButton'
+import ToggleMessage from './ToggleMessage'
+const ComPattern = () => (
+  <Toggle>
+    <ToggleButton />
+    <ToggleMessage />
+  </Toggle>
+)
+export default ComPattern