Skip to content

ReactCSSTransitionGroup. How to specify component's properties? #2371

Closed
@genbit

Description

@genbit

ReactCSSTransitionGroup by default render span component. And it introduce new dom element, that need to be counted in CSS, for example when using flex box layout:

<div class="row">
    <span>
        <div class="element"></div>
    </span>
</div>

Problems that I see here:

  1. Span by default is inline element, so I need to redefine CSS styles for it
  2. CSS becomes more complex, above example will require to write CSS like this:
.row > span { /* and we forced to use > here */
   display: flex;
}

Working example here: http://jsfiddle.net/c60328nv/1/

React.js documentation offers two options:

  • use React.DOM.div
  • write own component

Ok, I can write my own component: FlewRow, and FlexColumn (for flex-direction: column).
But with this solution I'll endup with a lot of components, which just basically render one div element with different classes:

  • FlexRow:
  • FlexRowReverse:
  • FlexColumn:
  • FlexColumnReverse:

Any way to specify properties for transition group component? I didn't find anything in source code or documentation

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions