React-transition-group: Why use <span> as default container?

[DeyLak]

Question is easy: why does react-transition-group render <span> by-default? I suppose, that, rendering <div> element is much more common case.

[jquense]

I don't know, it's always been that. I agree tho that a div probably is a better default

[petermikitsh]

Probably since <div>'s are block-level by default (as opposed to <span>'s, which are inline) and could cause layout changes.

[jquense]

Yeah, I think the inline display of the span is probably why it was chosen, but in practice I don't think i've usually ever want to default to an inline list. plus display: inline can cause it's own issues.

I'd probably suggest changing it to a div as the default, but it's not a huge deal

[edflips]

For anyone arriving here looking for a way to change the default use of a <span>, from the old facebook docs for ReactTransitionGroup:

ReactTransitionGroup renders as a span by default. You can change this behavior by providing a component prop.

Like the following for a <section> wrapper:

<CSSTransitionGroup component="section" transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>