Improved React Context

gistfile1.txt

import { createContext, useContext, useMemo, ConsumerProps, ReactNode } from 'react'

interface Value {
  mode: 'dark' | 'light';
  setMode: (mode: 'dark' | 'light') => void;
  compact: boolean;
  setCompact: (compact: boolean) => void;
}

const Context = createContext<Value | null>(null)

export function useTheme(): Value {
  const value = useContext(Context)
  if (value === null) throw new Error('no value provided')
  return value
}

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [mode, setMode] = useState<Value['mode']>('dark')
  const [compact, setCompact] = useState<Value['compact']>(false)
  
  const value = useMemo(() => ({
    mode,
    setMode,
    compact,
    setCompact,
  }), [mode, setMode, compact, setCompact])

  return <Context.Provider value={value}>{children}</Context.Provider>
}

// OPTIONAL
export function ThemeConsumer({ children }: ConsumerProps<Value>) {
  const value = useTheme() // will throw if value is null
  return children(value)
}