A simple function to split up a props object into specified `customProps` that match `keys` and the remaining `spreadProps`

extract-props.d.ts

declare module "extract-props" {
  export interface ExtractedProps {
    spreadProps: object;
    customProps: object;
  }

  export default function extractProps(props: object, keys: string[]): ExtractedProps;
}

extract-props.js

const extractProps = (props, keys) => {
  const spreadProps = {...props};
  const customProps = {};
  keys.forEach(k => {
    if (k in spreadProps) {
      customProps[k] = spreadProps[k];
      delete spreadProps[k];
    }
  });

  return { spreadProps, customProps };
};

export default extractProps;

extract-props.ts

export interface ExtractedProps {
  spreadProps: object;
  customProps: object;
}

const extractProps = (props: object, keys: string[]): ExtractedProps => {
  const spreadProps = { ...props };
  const customProps = {};

  keys.forEach(k => {
    if (k in spreadProps) {
      customProps[k] = spreadProps[k];
      delete spreadProps[k];
    }
  });

  return { spreadProps, customProps };
};

export default extractProps;

The main idea is if you have a React module and want pass through most props into a child component, but want to extract some custom ones to do something different with them. Perhaps you don’t want to pass the custom ones along or you want to avoid warnings such as: “Warning: Received true for a non-boolean attribute warning.”

import classNames from 'classnames';
import React from 'react';

import extractProps from './extract-props';

export default props => {
  const { spreadProps, customProps } = extractProps(props, ['isWarning']);
  const { isWarning } = customProps;
  return <div {...spreadProps} className={classNames(spreadProps.className, { 'warning': isWarning })} />
}

Also, I’m playing around with Typescript. It seems like a potential issue here is that props would be typed, so it’d be better if the function could do something more generic with object types that are passed it…