Collapsible

Collapsible allows you to display / hide its children with a smooth animation.

Example

Now you see me.

const Content = styled(Text)`
  border: 1px solid black;
  padding: 20px;
`

const App = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>Collapse</Button>
      <Collapsible open={isOpen}>
        <Content>Now you see me.</Content>
      </Collapsible>
    </>
  )
}

render(<App />)

const Content = styled(Text)`
  border: 1px solid black;
  padding: 20px;
`
const App = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}>Collapse</Button>
      <Collapsible open={isOpen}>
        <Content>Now you see me.</Content>
      </Collapsible>
    </>
  )
}
render(<App />)

Props

Name	Type	Default value	Description
children required	node	null	Content of the collapsible element.
open	bool	false	Is the collapsible element open or not.