Curative UI Context Experiment

cui.tsx

import { useContext, createContext, PropsWithChildren, ComponentType } from 'react';

const CUIContext = createContext(false);

function CUIProvider({children}: PropsWithChildren<{}>) {
  const isWithinCuiContext = useContext(CUIContext);
  if (!isWithinCuiContext) {
    return (
      <CUIContext.Provider value={true}>
        <div className="cui">
          {children}
        </div>
      </CUIContext.Provider>
    );
  }
  return (
    <>
      {children}
    </>
  );
}

function withCUIContext<Props>(WrappedComponent: ComponentType<Props>) {
  return function ComponentWrappedInCUIContext(props: Props) {
    return (
      <CUIProvider>
        <WrappedComponent {...props} />
      </CUIProvider>
    );
  }
}

// -- Component implementation (automatically wrapped in a div with the `.cui` className)

const MyCUIComponent = withCUIContext(() => <a href="https://google.com">Link</a>);