React Context snippet

constants.js

export const CONSTANT = 'CONSTANT';

ExampleContext.js

import React, { createContext } from 'react';

import * as constants from './constants';

const ExampleContext = createContext();
const { Consumer, Provider } = ExampleContext;

const UserProvider = ({ children }) => {
  return <Provider value={{}}>{children}</Provider>;
};

const useExampleContext = () => useContext(ExampleContext);

export { Consumer as UserConsumer, UserProvider, useExampleContext };

export default ExampleContext;

index.js

export { default as withExampleContext } from './withExampleContext';
export * from './constants';
export {
  default,
  ExampleContextConsumer,
  ExampleContextProvider,
  useExampleContext,
} from './ExampleContext';

withExampleContext.js

import React from 'react';
import hoistStatics from 'hoist-non-react-statics';

import getComponentDisplayName from '~/utils/getComponentDisplayName';

import { useExampleContext } from './ExampleContext';

function withExampleContext(ComposedComponent) {
  const displayName = getComponentDisplayName(ComposedComponent);

  const WithExampleContextWrapper = (props) => {
    const example = useExampleContext;
    return <ComposedComponent data={{ ...example }} {...props} />;
  };

  WithExampleContextWrapper.displayName = `withExampleContext(${displayName})`;

  return hoistStatics(WithExampleContextWrapper, ComposedComponent);
}

export default withExampleContext;