makeInjectable.js

import React, { createContext, useContext, useMemo } from 'react';
import PropTypes from 'prop-types';

export const makeInjectable = (Component, injectables) => {
  const Context = createContext(injectables);
  const useInjections = () => useContext(Context);

  const WrappedComponent = ({ injections, ...props }) => {
    const injected = useMemo(() => ({ ...injectables, ...injections }), [
      injections,
    ]);

    return (
      <Context.Provider value={injected}>
        <Component {...props} />
      </Context.Provider>
    );
  };

  WrappedComponent.defaultProps = {
    ...Component.defaultProps,
    injections: {},
  };

  WrappedComponent.propTypes = {
    ...Component.propTypes,
    injections: PropTypes.shape({
      [PropTypes.string]: PropTypes.element.isRequired,
    }),
  };

  WrappedComponent.displayName = `Injectable(${Component.displayName ||
    Component.name})`;

  return {
    Component: WrappedComponent,
    useInjections,
  };
};