Comparisons

In this section we will make some comparisons with the most popular libraries in npm.

See the difference in how both components transition to the new height.

react-collapsible-content transitions smoothly, while others jumps directly to the new height.

How to import

import CollapsibleContent from 'react-collapsible-content';

rc-collapse

In rc-collapse transition is activated when onClick and deactivated when transition ends. That is why you don't see animations when content changes.

Content will change in: 5 seconds (refresh to restart).

Toggle: react-collapsible-content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

Toggle: rc-collapse

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

() => {
  const [expanded, setExpanded] = React.useState(true)
  const styles = {
    container: { maxWidth: 800, width: '100%' },
  }
  return (
    <Column style={styles.container}>
      <p>
        Content will change in: <CountdownComponent delay={5000} /> seconds
        (refresh to restart).
      </p>
      <Row horizontal="space-between">
        <Column flexGrow={1} style={{ maxWidth: 375 }}>
          <ToggleButtonComponent
            expanded={expanded}
            onClick={() => setExpanded(prev => !prev)}
            title="Toggle: react-collapsible-content"
          />
          <CollapsibleContent transitionDuration=".600s" expanded={expanded}>
            <DynamicText delay={5000} />
          </CollapsibleContent>
        </Column>
        <Column flexGrow={1} style={{ maxWidth: 375 }}>
          <Collapse
            activeKey={[expanded ? '1' : '']}
            onChange={() => setExpanded(prev => !prev)}
            accordion={true}
          >
            <Panel key="1" header="Toggle: rc-collapse">
              <DynamicText delay={5000} />
            </Panel>
          </Collapse>
        </Column>
      </Row>
    </Column>
  )
}

() => {
  const [expanded, setExpanded] = React.useState(true)
  const styles = {
    container: { maxWidth: 800, width: '100%' },
  }
  return (
    <Column style={styles.container}>
      <p>
        Content will change in: <CountdownComponent delay={5000} /> seconds
        (refresh to restart).
      </p>
      <Row horizontal="space-between">
        <Column flexGrow={1} style={{ maxWidth: 375 }}>
          <ToggleButtonComponent
            expanded={expanded}
            onClick={() => setExpanded(prev => !prev)}
            title="Toggle: react-collapsible-content"
          />
          <CollapsibleContent transitionDuration=".600s" expanded={expanded}>
            <DynamicText delay={5000} />
          </CollapsibleContent>
        </Column>
        <Column flexGrow={1} style={{ maxWidth: 375 }}>
          <Collapse
            activeKey={[expanded ? '1' : '']}
            onChange={() => setExpanded(prev => !prev)}
            accordion={true}
          >
            <Panel key="1" header="Toggle: rc-collapse">
              <DynamicText delay={5000} />
            </Panel>
          </Collapse>
        </Column>
      </Row>
    </Column>
  )
}

In react-collapse height: auto; by default when it's expanded, that is why you don't see any transition after children changes. When it changes to collapsed height is set to 0px and when it changes to expanded height is set to the current height of the component (i.e.: 280px), and when transitions end height is set to auto again.

Note: transitions doesn't work when height is set to auto.

coming soon

react-collapsible

In react-collapsible

coming soon

Comparisons

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}How to import

rc-collapse

react-collapse

react-collapsible

How to import