react-flow-types

A small collection of flow type definitions for working with React components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-flow-types
0.2.0-beta.66 years ago7 years agoMinified + gzip package size for react-flow-types in KB

Readme

react-flow-types
Build Status npm downloads License Gitter

Note

Most of the types that used to be in this package now have equivalents in flow@0.53, so I'm deprecating them. The most important type that still remains is HigherOrderComponent. If you come up with more useful types for react, feel free to submit a PR :)

Usage

$ npm install --save-dev react-flow-types

HigherOrderComponent<RequiredProps, ProvidedProps>

The generic type of a higher-order component. A HigherOrderComponent always provides a set of props to the inner component, and requires another set of props to be passed to it.
Example:
import type {HigherOrderComponent} from 'react-flow-types'

type RequiredProps = {
  name: string,
}

type ProvidedProps = {
  input: {
    value: mixed,
    onChange: Function,
  },
}

// The hoc:
const asField = (): HigherOrderComponent<RequiredProps, ProvidedProps> => (component): any => {
  const FinalComponent = ({name, ...rest}) =>
    <ReduxFormField name={name} component={component} props={rest} />;

  hoistNonReactStatics(FinalComponent, component)

  FinalComponent.displayName =
    `asField(${component.displayName || component.name || 'Component'})`

  return FinalComponent
}

const Input = ({input}) => <input type="text" {...input} />
const WrapperInput = asField(Input)

const element = <WrappedInput name="email" />