import React , { createContext , FC , ReactNode } from 'react' ; import { toHash } from '@trousers/hash' ; export interface ThemeCtx { hash : number ; theme : Record < string , any > ; } export interface ThemeProviderProps { theme : Record < string , any > ; children : ReactNode ; } export const ThemeContext = createContext < ThemeCtx > ( { hash : 0 , theme : { } , } ) ; export const ThemeConsumer = ThemeContext . Consumer ; export const ThemeProvider = ( { theme , children } ) => { const hash = toHash ( JSON . stringify ( theme ) ) ; const { theme : cachedTheme } = React . useMemo ( ( ) => ( { theme , } ) , [ hash ] ) ; return ( < ThemeContext . Provider value = { { theme : cachedTheme , hash } } > { children } < /ThemeContext.Provider>); } ;