Initial React Context value.

type Action = {type: "modal_open"} | {type: "modal_close"}
type Dispatch = (action: Action) => void
type State = {isModalOpen: boolean}
type Props = {children: React.ReactNode};

const ExampleContext = createContext<{state: State; dispatch: Dispatch} | undefined>(undefined);

function exampleReducer(state: State, action: Action) {
  switch (action.type) {
    case "modal_open": {
      return { ...state, isModalOpen: true };
    }
    case "modal_close": {
      return { ...state, isModalOpen: false };
    }
  }
}

export const ExampleContextProvider = ({ children }: Props) => {
  const [state, dispatch] = useReducer(exampleReducer, {
    isModalOpen: false,
  });

  const value = { state, dispatch };
  return (
    <ExampleContext.Provider value={value}>
      {children}
    </ExampleContext.Provider>
  );
};

export const useExample = () => {
  const context = useContext(ExampleContext);
  if (context === undefined) {
    throw new Error(
      "useExample must be used within a ExampleProvider"
    );
  }
  return context;
};

type Props = {children: React.ReactNode, initialModalState: boolean};

export const ExampleContextProvider = ({ children, initialModalState }: Props) => {
  const [state, dispatch] = useReducer(exampleReducer, {
    isModalOpen: initialModalState,
  });

  const value = { state, dispatch };
  return (
    <ExampleContext.Provider value={value}>
      {children}
    </ExampleContext.Provider>
  );
};