connect-context.tsx

// h/t @japsu for the idea. had to type it.

import React from "react";

function connect<C, P>(
  ContextClass: React.Context<C>,
  propName: keyof P,
): ((
  component: React.FunctionComponent<P> | React.ComponentClass<P>,
) => React.FunctionComponent<P>) {
  return WrappedComponent => (props: P) => (
    <ContextClass.Consumer>
      {value => <WrappedComponent {...{ ...props, [propName]: value }} />}
    </ContextClass.Consumer>
  );
}

function connect2<C, P>(
  ContextClass: React.Context<C>,
  propName: keyof P,
  WrappedComponent: React.FunctionComponent<P> | React.ComponentClass<P>,
): React.FunctionComponent<P> {
  return (props: P) => (
    <ContextClass.Consumer>
      {value => <WrappedComponent {...{ ...props, [propName]: value }} />}
    </ContextClass.Consumer>
  );
}

interface IUserContext {
  id?: string;
  name?: string;
}

const UserContext = React.createContext<IUserContext>({});

interface UserInfoProps {
  user: IUserContext;
}

const UserInfo: React.FunctionComponent<UserInfoProps> = ({ user }) =>
  user.id ? <>ohai {user.name}</> : null;
const ConnectedUserInfo = connect<IUserContext, UserInfoProps>(
  UserContext,
  "user",
)(UserInfo);
const ConnectedUserInfo2 = connect2<IUserContext, UserInfoProps>(
  UserContext,
  "user",
  UserInfo,
);