Collapsible

The Collapsible component is used for hiding/reveal its children. It requires only the expand prop which determines when to hide or reveal its children.

import { Collapsible } from "@wigxel/react-components/lib/lists";


const Faqs = () => {
  const [state, setState] = React.useState(false)

  return (
    <div>
      <p>
        <span>How to get Started</span>
        &nbsp;
        <button onClick={() => setState(!state)}>{state ? "+" : "-"}</button>
      </p>
      <Collapsible expand={state}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi amet
        tempore inventore praesentium maxime suscipit dolores sequi quia
        sapiente.
      </Collapsible>
    </div>
  )
}

Collapsible Prop Types

Collapsible.propTypes = {
  // hides/reveals the children
  expand: t.bool, 
  
  // morphs the height after a change happens
  morph: t.bool.isRequired,
  
  // The children prop
  children: t.node.isRequired,
}