digiaonline / react-flow-types

Flow type definitions for React

react-flow-types

Note

Most of the types that used to be in this package now have equivalents in [email protected], 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" />

react-flow-types's Issues

Document gotchas/edge-cases

After the great work by @rsolomon and @rosskevin to get us compatible with 0.57, we seem to have found a few gotchas when dealing with HOCs. These are mentioned in #14 and #16. This issue is a reminder for me and others that these findings should be documented.

Issue combining different High order components

I'm having problems combining react-router-dom and material-ui. I was pointed in this direction from a flow-typed issue.

I've got a component that looks something like:

// @flow

import * as React from 'react'
import { withRouter } from 'react-router-dom'
import { withStyles } from 'material-ui/styles'

type Props = {
  content: string,
  classes: {
    [string]: string,
  },
}

class Button extends React.Component<Props> {
  render () {
    return (
      <button className={this.props.classes.main}>
        {this.props.content}
      </button>
    )
  }
}

export default withStyles({
  main: {
    background: 'red',
  }
})(withRouter(Button))

Which gives me:

$ flow
Launching Flow server for /Users/flow-react-router-dom-test
Spawned flow server (pid=79843)
Logs will go to /private/tmp/flow/XXXXXXXflow-react-router-dom-test.log
Library type error:
flow-typed/npm/react-router-dom_v4.x.x.js:144
144:     Component: React$ComponentType<{| ...ContextRouter, ...P |}>
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. This type is incompatible with
 14: class Button extends React.Component<Props> {
                                          ^^^^^ object type. See: src/Button.js:14
  Property `classes` is incompatible:
     19:           <Button content="click me" />
                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ undefined. This type is incompatible with. See: src/App.js:19
                    v
      9:   classes: {
     10:     [string]: string,
     11:   },
           ^ object type. See: src/Button.js:9

Library type error:
flow-typed/npm/react-router-dom_v4.x.x.js:144
144:     Component: React$ComponentType<{| ...ContextRouter, ...P |}>
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. This type is incompatible with
 14: class Button extends React.Component<Props> {
                                          ^^^^^ object type. See: src/Button.js:14
  Property `content` is incompatible:
     19:           <Button content="click me" />
                                   ^^^^^^^^^^ undefined. This type is incompatible with. See: src/App.js:19
      8:   content: string,
                    ^^^^^^ string. See: src/Button.js:8

Error: src/App.js:19
 19:           <Button content="click me" />
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `Button`
 19:           <Button content="click me" />
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `Button`. Inexact type is incompatible with exact type
144:     Component: React$ComponentType<{| ...ContextRouter, ...P |}>
                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ object type. See lib: flow-typed/npm/react-router-dom_v4.x.x.js:144

Under the covers, withStyles looks like:

const withStyles = (
  stylesOrCreator: Object,
  options?: Options = {},
): HigherOrderComponent<RequiredProps, InjectedProps> => (Component: any): any => {

If you want to check out a complete example, I've created a reduced example.

Is it possible to fix this issue in my code, or would it require a change to HigherOrderComponent?

Thanks!

HOC without the function returns function

After a day of working on our HOCs, I nailed down all our HOCs to the normal syntax, then bumped into facebook/flow#4644.

We have one HOC that is a direct function, instead of function that returns a function.

Perhaps my brain is fried after a long day, but what is the syntax to remove the outer function from this library's usage? Here it is based on the example:

// ----------------------
// withTheme HOC
type InjectedProps = { theme: Object };
type HOCProps = { option1?: number };

const withTheme = (): HigherOrderComponent<HOCProps, InjectedProps> => (Component: any): any => {
  return (props) => {
    return <Component {...props} />;
  }
}

This works with withTheme()(A), but I'm looking for usage like withTheme(A). Ugh. Any help is appreciated.

Flow checks fail using `HigherOrderComponent` on [email protected] when DefaultProps is not provided

Authors of Flow rewrote $Diff in v0.57.x. It mostly functions the same, but it now fails if the 2nd parameter is undefined, resulting in an error like this:

 <Grid item xs={12} sm={6}>
                 ^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `Grid`. This type is incompatible with
 23:       React.ComponentType<RequiredProps & $Diff<$Diff<OriginalProps, ProvidedProps>, DefaultProps>>)
                                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ empty. See: node_modules/react-flow-types/index.js.flow:23

I believe this can be fixed simply by providing a default DefaultProps type definition of {}.

How to include this module if node_modules are ignored

I ignore node_modules and I'm trying to include react-flow-types into [libs] section like explained here with fbjs.

[ignore]
<PROJECT_ROOT>/node_modules/.*

[libs]
<PROJECT_ROOT>/node_modules/react-flow-types

But then I anyway got error

  5: import type {AnyReactElement} from 'react-flow-types';
                                        ^^^^^^^^^^^^^^^^^^ react-flow-types. Required module not found

Is there a way to import types from react-flow-types while ignoring node_modules?

HigherOrderComponent type behaving strangely

As far I can tell, I'm exactly following your example for implementing typing HOCs, but I keep getting the same error

React element `WrappedWidget` Type is incompatible with (unclassified use type: ReactKitT) any member of intersection type intersection

Here's my test code

import type { HigherOrderComponent } from "react-flow-types"

import React from "react"
type RequiredProps = {
    foo: string
}

type ProvidedProps = {
    bar: string
}

const enhancer = (): HigherOrderComponent<RequiredProps, ProvidedProps> => (
    blarg
): any => {
    return ({ foo }) => {
        return <blarg bar={foo} />
    }
}

type PropTypes = {
    name: string,
    bar: string
}

const Widget = ({ bar }: PropTypes) => {
    return <div>Widget {bar} </div>
}

const WrappedWidget = enhancer(Widget)

const a = <WrappedWidget foo="test" />

HOC type does not work with Props containing unions of different types

Copying my comment from facebook/flow#5187.

The HOC type doesn't seem to fix the issue for cases where Props is a union of different types.

E.g.

type Props = {
  foo: string | number;
}

class myComp extends React.Component { ... }
myComp.defaultProps = {
  foo: ''
};

$Diff breaks since Props and defaultProps don't have the same types, see: this example for the Diff mismatch case and this repro case for the HOC type failing when using union types.

I've tried constraining the DefaultProps generic to $Shape<Props> in the HigherOrderComponent type but can't seem to get it to work. Probably because it's trying to reference a sibling generic type.

All in one file works, separate files do not work

Test repo: https://github.com/rosskevin/test-react-flow-types

[email protected]. Same results with 0.58.0, 0.57.3
[email protected]

All in one

The allInOne.js works fine, which is the same in try flow

Considering that it might be a problem with the imported type Translate, I have further simplified the repo (though left the more complicated case as a branch)

Separate files

Does not work.
See index.js

TL;DR

yarn flow should work for all files in this repo.

yarn flow                                                                                                                                                                                                                                                                                                  ✘ 1 
yarn run v1.3.2
warning package.json: No license field
$ flow --show-all-errors
Error: src/index.js:8
  8:     <ClassTest />
         ^^^^^^^^^^^^^ props of React element `ClassTest`. This type is incompatible with
  6: class ClassTest extends React.Component<{ t: Function }> {
                                             ^^^^^^^^^^^^^^^ object type. See: src/ClassTest.js:6
  Property `t` is incompatible:
      6: class ClassTest extends React.Component<{ t: Function }> {
                                                 ^^^^^^^^^^^^^^^ property `t`. Property not found in. See: src/ClassTest.js:6
      8:     <ClassTest />
             ^^^^^^^^^^^^^ props of React element `ClassTest`


Found 1 error

---

@rsolomon - I'm baffled here. I modeled the translate after withStyles and kept running into a wall. Finally I created this test repo to isolate and still the same problem.

Thoughts?

Matching type with some prop of base component in HOC

So I have code that injects a theme prop but allows theme to still be passed as a $Shape of the theme.
Here's the code:

import * as React from 'react';
import classnames from 'classnames';
import type {HigherOrderComponent} from 'react-flow-types';

type Theme = { [className: string]: string };
type MergeThemeHOC = Theme => HigherOrderComponent<{theme?: $Shape<Theme>}, {theme: Theme}>;

const mergeTheme: MergeThemeHOC = (injectedTheme: Theme) => (Component: any): any => {
    return (props) => {
        let theme: Theme = injectedTheme;
        if (props && props.theme) {
            const passedTheme: $Shape<Theme> = props.theme;
            theme = Object.keys(passedTheme)
                .filter((key: string) => !!injectedTheme[key])
                .reduce((accum: Theme, key: string) => {
                    accum[key] = classnames(passedTheme[key], injectedTheme[key]);
                    return accum;
                }, { ...passedTheme, ...injectedTheme });
        }
        return <Component {...props} theme={theme} />;
    };
};

And then consuming it would look like:

const WrappedComponent = mergeTheme({ foo: 'bar' })(MyComponent);

Yet this is really meant to be used with components that expect a theme prop and have it defined its props e.g.

type MyComponentProps = {
  // ...
  theme: { foo: string, hello: string }
}

If that is the type of props of MyComponent, an error should be thrown but none does because the type of Theme in mergeTheme is the type defined by injectedTheme rather than MyComponentProps.theme.

The reason is pretty obvious why looking at the implementation but I'm not sure how to fix it and bound Theme to MyComponents.theme. Is this even possible in flow right now?

Trying to add type information to Component in mergeTheme starts throwing all sorts of problems.

Usa HigherOrderComponent with HOC returning class component

HigherOrderComponent can't be used with HOC returning React class components?

// returning class component
  (function() {
    const hoc: HigherOrderComponent<{}, { test: boolean }> = () => class extends React.Component {
      render() {
        return (<div test />);
      }
    }
  })();

Publish on NPM

I would suggest that we rename the repo to react-flow-types and publish it on NPM under the same name.