Instantiate hook context using generics inside of a functional component

Question

I have a component Application that can get a theme object has a props. The theme is then stored in a context using the hook React.createContext:

import React from 'react'


export interface Theme {
  colors: string[]
  images: string[]
}

interface ThemeContextParam {
  theme: Theme
  setTheme: (newTheme: Theme) => void
}

interface Props {
  theme: Theme
}

// C O N T E X T
export const ThemeContext = React.createContext<ThemeContextParam>({} as ThemeContextParam)

// C O M P O N E N T
const Application: React.FunctionComponent<Props> = (props) => {
  const {
    theme: propsTheme,
    children
  } = props

  const [themeState, setThemeState] = React.useState<Theme>(propsTheme)

  const themeContextProviderValue = {
    theme: themeState,
    setTheme: setThemeState
  }

  return (
    <ThemeContext.Provider value={themeContextProviderValue}>
      {children}
    </ThemeContext.Provider>
  )
}

export default Application

I initialise the context calling the Application component:

// C O M P O N E N T
const Theme = (): JSX.Element => {
  return (
    <Application theme={myTheme}>
      <App />
    </Application>
  )
}

So then I can consume the context like that:

import { ThemeContext } from '../Application'

// C O M P O N E N T
const App = (): JSX.Element => {
  const { theme } = React.useContext(ThemeContext)
  ...

But now I want my Theme to be a generic so that the devs can store in the context whatever they want and not just an object {colors: string[], images: string[]}. The generic will be passed to the Application component like that:

<Application<CustomThemeType> theme={myTheme}>

So I implement the generics types in Application:

import React from 'react'

// I N T E R F A C E S
export interface Theme {
  colors: string[]
  images: string[]
}

interface ThemeContextParam<T extends Theme = Theme> {
  theme: T,
  setTheme: (newTheme: T) => void
}

interface Props<T extends Theme> {
  theme: T
}

// C O N T E X T
export const ThemeContext = React.createContext<ThemeContextParam>({} as ThemeContextParam)

// C O M P O N E N T
const Application = <T extends Theme>(props: Props<T> & { children?: React.ReactNode }): JSX.Element => {
  const {
    theme: propsTheme
    children
  } = props

  const [themeState, setThemeState] = React.useState<T>(propsTheme)

  const themeContextProviderValue = {
    theme: themeState,
    setTheme: setThemeState
  }

  return (
    <ThemeContext.Provider value={themeContextProviderValue}>
      {children}
    </ThemeContext.Provider>
  )
}

But as you can see the ThemeContext context is not handling the generic type. If I want to handle the generic I need to instantiate it in the component itself like that:

const Application = <T extends Theme>(props: Props<T> & { children?: React.ReactNode }): JSX.Element => {
  const ThemeContext = React.createContext<ThemeContextParam<T>>({} as ThemeContextParam<T>)

But in this case, I'm not able to export my ThemeContext.

So has someone an idea how I can instantiate this context using a generic type and export it?

Answer 1

I didn't try it out (as you didn't provide a CodeSandbox), but couldn't you create a wrapper function that takes a generic type to initialize your context environment and return both the component and the context:

function createThemeContext<T extends Theme>() {
  // C O N T E X T
  const ThemeContext = React.createContext<ThemeContextParam<T>>({} as ThemeContextParam<T>)

  // C O M P O N E N T
  const Application = (props: Props<T> & { children?: React.ReactNode }): JSX.Element => {
     ...
  }

  return {
    ThemeContext,
    Application
  };
}

...

const { ThemeContext, Application } = createThemeContext<YourTheme>();

Some smartassing: I think having a generic context is a sign of over-abstracting and rarely provides good value. I would rather have a fixed interface to define the context state, so everyone knows what this context is expected to do.

Also, I would highly recommend to return a custom hook instead of the context itself, so the usage is clear. Something like:

function useThemeContext() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error(
      'useThemeContext must be used within a ThemeContext provider!'
    );
  }
  return context;
}

Highly recommend Kent C. Dodds' blog post for context management.

Answer 2

The usage you described is technically impossible. However I do have a workaround solution to your use case.

Assume your ThemeContext is meant to be a global context and <Application /> is a singleton, would not be instantiated twice in the same app, then this workaround applies:

DO NOT make Application generic, instead you export an empty Theme interface for devs to augment.

/* your module 'johannchopin-awesome-module' */
export interface Theme {}


/* dev's consuming module 'foo' */
import { Application, ThemeContext } from 'johannchopin-awesome-module'

declare module 'johannchopin-awesome-module' {
  interface Theme {
    /* they can fill in whatever fields here */
    foo: string
  }

   // OR:

   interface Theme extends UserDefinedTheme {}
}

const context = React.useContext(ThemeContext)
context.theme.foo // <- they're able to see a 'string' here

This workaround is also used by react-redux lib. Look for DefaultRootState in the source code.

I setup a codesandbox to demonstrate the usage:

---

A little explanation on why your described usage is impossible to archive.

Logically both <Application /> and any <DownStreamConsumerComponet /> depends on ThemeContext. So they don't have a say to how should ThemeContext behave, that context is the boss. If you were to pass a generic to any party, that party should be ThemeContext itself in the first place.

However that cannot be done either, due to the way how react context works. So my workaround is basically "passing-in generic" to ThemeContext using declaration merging technique.