Magic React Context Creator

createContext.tsx

import type { Context, PropsWithChildren } from 'react';
import React from 'react';

function createUseContext<T>(FilterContext: Context<T | null>, noContextMessage: string) {
  return () => {
    const context = React.useContext(FilterContext);
    if (!context) {
      throw new Error(noContextMessage);
    }
    return context;
  };
}

function createProvider<Value, ProviderProps>(
  Context: Context<Value | null>,
  value: Value | null,
  provider?: (value: Value | null, props: ExplicitAny) => Value
) {
  return function ContextProvider({ children, ...props }: PropsWithChildren<ProviderProps>) {
    return (
      <Context.Provider value={provider?.(value, props) || value}>{children}</Context.Provider>
    );
  };
}

export function createContext<T = unknown, ProviderProps = unknown>(
  value: T | null,
  noContextMessage: string,
  provider?: (value: T | null, props: ProviderProps) => T
) {
  const Context = React.createContext<T | null>(value);
  const ContextProvider = createProvider<T, ProviderProps>(Context, value, provider);
  const useContext = createUseContext<T>(Context, noContextMessage);

  return {
    Context,
    ContextProvider,
    useContext
  };
}