Allow an object (for CSS Modules) to be passed to ReactCSSTransitionGroup for Flow validation

Question

I am using ReactCSSTransitionGroup, CSS Modules, and Flow.

<ReactCSSTransitionGroup
  transitionName={{
    enter: slideTransition.enter,
    enterActive: slideTransition.enterActive,
    leave: slideTransition.leave,
    leaveActive: slideTransition.leaveActive,
  }}
  transitionEnterTimeout={500}
  transitionLeaveTimeout={500}
>
  { /* ... */ }
</ReactCSSTransitionGroup>

Because I am using CSS Modules, I have to pass each of enter, enterActive, leave and leaveActive a key of an object.

However, the flow check of this file tells me the following:

src/components/Category.jsx:153
153:           transitionName={{
                               ^ object literal. This type is incompatible with
 14:     transitionName: string | ReactCSSTransitionGroupNames,
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ union: string | ReactCSSTransitionGroupNames. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Member 1:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                           ^^^^^^ string. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Error:
  153:           transitionName={{
                                 ^ object literal. This type is incompatible with
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                           ^^^^^^ string. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Member 2:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ReactCSSTransitionGroupNames. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  Error:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `appear`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  153:           transitionName={{
                                 ^ object literal

Is there a way I can silence this error, or pass the correct type while being able to use CSS Modules?

score 0 · Answer 1 · answered Apr 16 '17 at 22:02

The transitionName uses a strict list of types:

export const nameShape = React.PropTypes.oneOfType([
  React.PropTypes.string,
  React.PropTypes.shape({
    enter: React.PropTypes.string,
    leave: React.PropTypes.string,
    active: React.PropTypes.string,
  }),
  React.PropTypes.shape({
    enter: React.PropTypes.string,
    enterActive: React.PropTypes.string,
    leave: React.PropTypes.string,
    leaveActive: React.PropTypes.string,
    appear: React.PropTypes.string,
    appearActive: React.PropTypes.string,
  }),
]);

In your case you missed the appear and appearActive props which are required.

flow also is informing you by these rows:

  Error:
   14:     transitionName: string | ReactCSSTransitionGroupNames,
                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `appear`. Property not found in. See lib: flow-typed/npm/react-addons-css-transition-group_v15.x.x.js:14
  153:           transitionName={{
                                 ^ object literal

Allow an object (for CSS Modules) to be passed to ReactCSSTransitionGroup for Flow validation

1 Answers1