Render PropsとHooksでシンプルな状態管理層を作る

Storybookとか、デザインシステムのドキュメントを作るときに便利。

コード(TypeScript)

import React, { useState } from 'react'

interface RenderProp {
  (
    object: {
      state: boolean
      setState: (newState: boolean) => void
    }
  ): React.ReactNode
}

interface Props {
  render?: RenderProp
  children?: RenderProp
  initialState: any
}

function StateManager(props: Props) {
  const [state, setState] = useState(props.initialState)

  return <div>{props.children({ state, setState })}</div>
}

export default StateManager

使い方

モーダルの表示非表示を制御するサンプル。

<StateManager initialState={false}>
  {({ state, setState }) => (
    <div>
      <button onClick={() => setState(true)}>
        モーダルを開く
　　　 </button>
      {state && <Modal onClose={() => setState(false)}/>}
    </div>
  )}
</StateManager>