reactHOCExampleContextAPI.tsx

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

type Theme = {
  fontColor: string;
};

const theme = {
  fontColor: 'red',
};

const ThemeContext = React.createContext({ theme });

type ThemeProviderProps = {
   theme: Theme;
};

const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => (
  <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
);

type WithThemeProps = {
  theme: Theme;
};

// HOC
const withTheme = <P extends object>(
  Component: React.ComponentType<P>,
): React.FC<Omit<P, keyof WithThemeProps>> => props => (
    <ThemeContext.Consumer>
      {({ theme }) => <Component {...props as P} theme={theme} />}
    </ThemeContext.Consumer>
  );

// Component
type ListProps = {
  items: string[];
  theme: Theme;
};

const List = ({ items, theme }: ListProps) => (
  <ul style={{ color: theme.fontColor }}>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

// Wrapping Component in HOC
const ListWithTheme = withTheme(List);

const App = () => (
  <ThemeProvider theme={theme}>
    <ListWithTheme items={['one', 'two', 'three']} />
  </ThemeProvider>
);