react-collapsible-content

A React Component to handle dynamic collapsible content

Instalation

npm install --save react-collapsible-content

yarn add react-collapsible-content

How to import

import CollapsibleContent from 'react-collapsible-content';

Basic usage

In the examples we are using ToggleButtonComponent and TextComponent that are just UI components (see code in Examples/Basic), but you can use your own button and your own content.

TOGGLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam sit amet nisl suscipit adipiscing. Diam phasellus vestibulum lorem sed risus. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Nulla facilisi cras fermentum odio eu feugiat pretium nibh ipsum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Dolor purus non enim praesent elementum facilisis leo. Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.

() => {
  const [expanded, setExpanded] = React.useState(false)
  const styles = {
    container: { maxWidth: 800, width: '100%' },
  }
  return (
    <Column style={styles.container}>
      <ToggleButtonComponent
        expanded={expanded}
        onClick={() => setExpanded(prev => !prev)}
      />
      <CollapsibleContent expanded={expanded}>
        <TextComponent />
      </CollapsibleContent>
    </Column>
  )
}

() => {
  const [expanded, setExpanded] = React.useState(false)
  const styles = {
    container: { maxWidth: 800, width: '100%' },
  }
  return (
    <Column style={styles.container}>
      <ToggleButtonComponent
        expanded={expanded}
        onClick={() => setExpanded(prev => !prev)}
      />
      <CollapsibleContent expanded={expanded}>
        <TextComponent />
      </CollapsibleContent>
    </Column>
  )
}

react-collapsible-content

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

How to import

Basic usage

Instalation