Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
genbit opened this issue Oct 17, 2014 · 1 comment
Closed

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

genbit opened this issue Oct 17, 2014 · 1 comment

Comments

@genbit
Copy link
Contributor

genbit commented Oct 17, 2014

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

@zpao
Copy link
Member

zpao commented Oct 20, 2014

Documentation will get up dated when #2373 gets synced out. So I'm going to call this closed. Thanks for taking this on!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants