Functional composition for React props

withDefaults.tsx

import * as React from 'react';

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

/**
 * Supplies default props.
 */
export function withDefaults<T extends React.ComponentType<any>, U extends Partial<React.ComponentProps<T>>>(
  Component: T,
  defaults: U,
): React.FunctionComponent<Omit<React.ComponentProps<T>, keyof U> & Partial<U>> {
  // Returning `<Component { ...defaults} {...props } />;` gives an error.
  // @see https://github.com/Microsoft/TypeScript/issues/14729
  return props => React.createElement(Component, { ...defaults, ...props });
}

/**
 * Partially applies props.
 */
export function withProps<T extends React.ComponentType<any>, U extends Partial<React.ComponentProps<T>>>(
  Component: T,
  defaults: U,
): React.FunctionComponent<Omit<React.ComponentProps<T>, keyof U>> {
  return props => React.createElement(Component, { ...defaults, ...props });
}

Usage:

/**
 * Example usage.
 */
interface Props {
  name: string;
  age: number;
}

declare const Foo: React.FunctionComponent<Props> | React.ComponentClass<Props>;

const FooWithDefaults = withDefaults(Foo, { name: 'Bob' });

<Foo age={0} name="Bob" />;              // Both props must be provided.
<FooWithDefaults age={0} />;             // No need to provide `name`!
<FooWithDefaults age={0} name="Hank" />; // It's still possible to override the defaults.