example.ts

import { createStateLifter } from './state-lifter'

const { Provider, useLiftedState } = createStateLifter("all");

export const LiftedCounter = () => (
  <Provider>
    <Filter />
    <List />
  </Provider>
);
const Filter = () => {
  const [state, setState] = useLiftedState();
  return (
    <select value={state} onChange={(event) => setState(event.target.value)}>
      <option value="all">All</option>
      <option value="fruits">Fruits</option>
      <option value="vegetables">Vegetables</option>
    </select>
  );
};
const List = () => {
  const [state] = useLiftedState();
  return (
    <div>
      <p>Displaying items for filter "{state}"</p>
      {/*TODO: Actual items display*/}
    </div>
  );
};

state-lifter.ts

import { ReactNode, createContext, useContext, useState, Dispatch, SetStateAction } from "react";

type StoreContext<T> = [state: T, setState: Dispatch<SetStateAction<T>>];

export default function createStateLifter<T>(initialState: T) {
  const Context = createContext<StoreContext<T> | null>(null);

  function useLiftedState() {
    const value = useContext(Context);
    if (!value) {
      throw new Error("Provider not found");
    }
    return value;
  }

  function Provider({ children }: { children: ReactNode }) {
    const state = useState(initialState);
    return <Context.Provider value={state}>{children}</Context.Provider>;
  }

  return { useLiftedState, Provider };
}