React hooks and context with create-store util

App.jsx

// src/App.jsx
import React from 'react'
import { Provider as CountProvider } from './context/count'
import ShowCount from './components/ShowCount'

const App = () => {
  return (
    <CountProvider>
      <ShowCount />
    </CountProvider>
  )
}

export default App

count.js

// src/context/count.js
import { useState } from 'react'
import createStore from '../utils/create-store'

const useCount = () => {
  const [count, setCount] = useState(0)

  const inc = () => setCount(count + 1)
  const dec = () => setCount(count - 1)

  return {
    count,
    inc,
    dec,
  }
}

export const { ctx, Provider } = createStore(useCount)

create-store.jsx

// src/utils/create-store.jsx
import React, { createContext } from 'react'

const createStore = (useHook) => {
  const ctx = createContext()

  const Provider = ({ children }) => {
    const value = useHook()

    return <ctx.Provider value={value}>{children}</ctx.Provider>
  }

  return {
    ctx,
    Provider,
  }
}

export default createStore

ShowCount.jsx

// src/components/ShowCount.jsx
import React, { useContext } from 'react'
import { ctx as CountContext } from '../context/count'

const ShowCount = () => {
  const { count, inc, dec } = useContext(CountContext)

  return (
    <div>
      Count: {count}
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
    </div>
  )
}

export default ShowCount