#04: Reusable Styles

showcase/src/patterns/index.js

@@ -12,6 +12,7 @@ import React, {
 import mojs from 'mo-js'
 import { generateRandomNumber } from '../utils/generateRandomNumber'
 import styles from './index.css'
+import userStyles from './usage.css'
 
 /** ====================================
    *          🔰Hook
@@ -130,13 +131,17 @@ const initialState = {
 const MediumClapContext = createContext()
 const { Provider } = MediumClapContext
 
-const MediumClap = ({ children, onClap }) => {
+const MediumClap = ({
+  children,
+  onClap,
+  className = '',
+  style: userStyles = {}
+}) => {
   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 => ({
@@ -172,7 +177,6 @@ const MediumClap = ({ children, onClap }) => {
     componentJustMounted.current = false
   }, [count, onClap])
 
-
   const memoizedValue = useMemo(
     () => ({
       ...clapState,
@@ -181,13 +185,17 @@ const MediumClap = ({ children, onClap }) => {
     [clapState, setRef]
   )
 
+  const classNames = [styles.clap, className].join(' ').trim()
+
   return (
     <Provider value={memoizedValue}>
       <button
         ref={setRef}
         data-refkey='clapRef'
         className={styles.clap}
         onClick={handleClapClick}
+        className={classNames}
+        style={userStyles}
       >
         {children}
       </button>
@@ -200,34 +208,53 @@ const MediumClap = ({ children, onClap }) => {
   Smaller Component used by <MediumClap />
   ==================================== **/
 
-const ClapIcon = () => {
+const ClapIcon = ({ className = '', style: userStyles = {} }) => {
   const { isClicked } = useContext(MediumClapContext)
+  const classNames = [styles.icon, isClicked ? styles.checked : '', className]
+    .join(' ')
+    .trim()
+
   return (
     <span>
       <svg
         id='clapIcon'
         xmlns='http://www.w3.org/2000/svg'
         viewBox='-549 338 100.1 125'
-        className={`${styles.icon} ${isClicked && styles.checked}`}
+        className={classNames}
+        style={userStyles}
       >
         <path d='M-471.2 366.8c1.2 1.1 1.9 2.6 2.3 4.1.4-.3.8-.5 1.2-.7 1-1.9.7-4.3-1-5.9-2-1.9-5.2-1.9-7.2.1l-.2.2c1.8.1 3.6.9 4.9 2.2zm-28.8 14c.4.9.7 1.9.8 3.1l16.5-16.9c.6-.6 1.4-1.1 2.1-1.5 1-1.9.7-4.4-.9-6-2-1.9-5.2-1.9-7.2.1l-15.5 15.9c2.3 2.2 3.1 3 4.2 5.3zm-38.9 39.7c-.1-8.9 3.2-17.2 9.4-23.6l18.6-19c.7-2 .5-4.1-.1-5.3-.8-1.8-1.3-2.3-3.6-4.5l-20.9 21.4c-10.6 10.8-11.2 27.6-2.3 39.3-.6-2.6-1-5.4-1.1-8.3z' />
         <path d='M-527.2 399.1l20.9-21.4c2.2 2.2 2.7 2.6 3.5 4.5.8 1.8 1 5.4-1.6 8l-11.8 12.2c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l34-35c1.9-2 5.2-2.1 7.2-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l28.5-29.3c2-2 5.2-2 7.1-.1 2 1.9 2 5.1.1 7.1l-28.5 29.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.4 1.7 0l24.7-25.3c1.9-2 5.1-2.1 7.1-.1 2 1.9 2 5.2.1 7.2l-24.7 25.3c-.5.5-.4 1.2 0 1.7.5.5 1.2.5 1.7 0l14.6-15c2-2 5.2-2 7.2-.1 2 2 2.1 5.2.1 7.2l-27.6 28.4c-11.6 11.9-30.6 12.2-42.5.6-12-11.7-12.2-30.8-.6-42.7m18.1-48.4l-.7 4.9-2.2-4.4m7.6.9l-3.7 3.4 1.2-4.8m5.5 4.7l-4.8 1.6 3.1-3.9' />
       </svg>
     </span>
   )
 }
-const ClapCount = () => {
+const ClapCount = ({ className = '', style: userStyles = {} }) => {
   const { count, setRef } = useContext(MediumClapContext)
+  const classNames = [styles.count, className].join(' ').trim()
+
   return (
-    <span ref={setRef} data-refkey='clapCountRef' className={styles.count}>
+    <span
+      ref={setRef}
+      data-refkey='clapCountRef'
+      className={classNames}
+      style={userStyles}
+    >
       +{count}
     </span>
   )
 }
-const CountTotal = () => {
+const CountTotal = ({ className = '', style: userStyles = {} }) => {
   const { countTotal, setRef } = useContext(MediumClapContext)
+  const classNames = [styles.total, className].join(' ').trim()
+
   return (
-    <span ref={setRef} data-refkey='clapTotalRef' className={styles.total}>
+    <span
+      ref={setRef}
+      data-refkey='clapTotalRef'
+      className={classNames}
+      style={userStyles}
+    >
       {countTotal}
     </span>
   )
@@ -255,10 +282,10 @@ const Usage = () => {
 
   return (
     <div style={{ width: '100%' }}>
-      <MediumClap onClap={onClap}>
-        <MediumClap.Icon />
-        <MediumClap.Total />
-        <MediumClap.Count />
+      <MediumClap onClap={onClap} className={userStyles.clap}>
+        <MediumClap.Icon className={userStyles.icon} />
+        <MediumClap.Total className={userStyles.total} />
+        <MediumClap.Count className={userStyles.count} />
       </MediumClap>
       {!!total && (
         <Info info={`Your article has been clapped ${total} times`} />

showcase/src/patterns/usage.css

@@ -0,0 +1,18 @@
+/** total **/
+
+.total {
+    color: #896EAF;
+}
+
+ /* count */ 
+.count {
+    background: #896EAF; 
+}
+
+ /* clap */ 
+.clap {
+    border: 1px solid #896EAF; 
+}
+.clap:hover {
+    border: 1px solid #896EAF; 
+}