React Patterns: Prop Collections and Getters

prop-collections.js

// Prop Collections and Getters

// merge all passed functions into one
const mergeFn =
  (...fns) =>
  (...args) =>
    fns.forEach(fn => fn?.(...args))

function useToggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)
  // 2. Wrap the common props object into 
  // a getter function to allow for custom props
  const getTogglerProps = ({onClick, ...props}) => ({
  // 1. Wrap commonly used props into an object
    'aria-pressed': on,
    onClick: mergeFn(toggle, onClick),
    ...props,
  })
  return {on, getTogglerProps}
}

function App() {
  const {on, getTogglerProps} = useToggle()
  return (
    <div>
      <Switch {...getTogglerProps({on})} />
      <hr />
      <button
        {...getTogglerProps({
          'aria-label': 'custom-button',
          onClick: () => console.log('onButtonClick'),
          id: 'custom-button-id',
        })}
      >
        {on ? 'on' : 'off'}
      </button>
    </div>
  )
}

export default App