mobx-react inject/provider with hooks

mobx-react.js

import React, { useContext, forwardRef } from 'react';

const MSTContext = React.createContext(null);

// eslint-disable-next-line prefer-destructuring
export const Provider = MSTContext.Provider;

export function useMst(mapStateToProps) {
  const store = useContext(MSTContext);

  if (typeof mapStateToProps !== 'undefined') {
    return mapStateToProps(store);
  }

  return store;
}

export function inject(mapStateToProps) {
  return function wrapper(Component) {
    return forwardRef((props, ref) => {
      const store = useMst();
      let propsToPass = store;

      if (typeof mapStateToProps !== 'undefined') {
        propsToPass = mapStateToProps(store, props);
      }

      return <Component ref={ref} {...propsToPass} />;
    });
  };
}