React Context API with Typescript Generic

Question

type ContextProps<T = object> = {
  store: T,
  updateStore: React.Dispatch<T>
};

export default React.createContext<Partial<ContextProps>>({}); // is there any way to pass the generic? so store can correct type

export function Provider<T, K>(props: T & { store: K }) {
  const [globalState, updateStore] = React.useState(props.store);
  const value = React.useMemo(
    () => ({
      store: globalState,
      updateStore,
    }),
    [globalState],
  );

  return <StateMachineContext.Provider value={value} {...props} />;
}

Is there any way to pass generic into Context, so value can have the correct type?

The only way I can semi achieve what you are asking is to type it on the other end when you call useContext<Type>(Context);. I think this is the best you are going to get as components making use of your context could appear under any instance of a provider for the context and each of these providers could have different generic types meaning typescript can't infer generic types for the consumer as it would have to assume the location of the component in the react tree. This is my understanding of it anyway. — Jacob Smit
– Jacob Smit, Commented Nov 10, 2020 at 4:14

Jerryc · Accepted Answer · 2020-11-10 04:18:14Z

6

pass the type when creating the context, remember to create it outside the components.

type ContextProps<T = object> = {
  store: T,
  updateStore: React.Dispatch<T>
};

function createGenericContext<T extends object> () {
  return React.createContext<Partial<ContextProps<T>>>({}); 
}

const StateMachineContext = createGenericContext<{type: 'a'}>();
// or just
const StateMachineContext = React.createContext<Partial<ContextProps<{type: 'a'}>>>({});

export function Provider<T, K>(props: T & { store: K }) {
  const [globalState, updateStore] = React.useState(props.store);
  const value = React.useMemo(
    () => ({
      store: globalState,
      updateStore,
    }),
    [globalState],
  );

  return <StateMachineContext.Provider value={value} {...props} />;
}

answered Nov 10, 2020 at 4:18

Jerryc

3102 gold badges5 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ii iml0sto1 Over a year ago

im getting: Type 'K' is not assignable to type '{ type: "a"; } | undefined'.

Chuckatron Over a year ago

This is a good solution, but just to note this won't work if the component itself receives a generic as you can't create the context outside the component, since it won't know about the generic. This might be obvious, but it took me a while to realise it.

Collectives™ on Stack Overflow

React Context API with Typescript Generic

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related