A much better createContext, usable before React 19, with good TypeScript Types

create-context.tsx

import { createContext as create, useContext } from 'react'

export function createContext<T>(initial?: T) {
  const ctx = create<T>(initial ?? (null as any))

  return Object.assign(
    function Provider(props: React.ComponentProps<typeof ctx.Provider>) {
      return <ctx.Provider {...props} />
    },
    ctx,
    {
      use: () => useContext(ctx),
    }
  )
}

implementation.tsx

import { createContext } from 'react'

// no need to pass a default value if you want invalid consumers to crash anyway, which is usually desired
const Context = createContext<{ color: string }>()
  
export function Page() {
  return (
    // no need to do .Provider
    <Context>  
      <Child />
    </Context>
  )
}
  
function Child() {
  // no need to import useContext separately
  const { color } = Context.use()
  
  return null
}