[finom/create-state-context] Creates useState-like hook which uses react context

createStateContext.js

/*
  Can be used to achieve useState hook experience with React Context API
  1. Create context with some initial state:
  const MyContext = createStateContext(0);
  2. Wrap your component by the context provider
  <MyContext.Provider>
    <MyComponent />
  </MyContext.Provider>
  3. Use it in your components with built-in react useContext hook:
  import { useContext } from 'react';
  ...
  const [value, setValue] = useContext(MyContext);
  ... 
  setValue(value + 1);
*/

import { useState, createContext, createElement } from 'react';

export default function createStateContext(initialState) {
  // eslint-disable-next-line no-console
  const TheContext = createContext([initialState, () => console.error('State context is used but not wrapped by its provider')]);
  const { Provider } = TheContext;

  TheContext.Provider = ({ children }) => createElement(
    Provider, 
    { value: useState(initialState) },
    children,
  );

  return TheContext;
}