@volvo-cars/accordion-component

Accordion component

Usage no npm install needed!

<script type="module">
  import volvoCarsAccordionComponent from 'https://cdn.skypack.dev/@volvo-cars/accordion-component';
</script>

README

Accordion

Basic usage

<Accordion label="Accordion example">
  <Block as="p">...text</Block>
</Accordion>

Usage with parent state

const MultipleControlledAccordions = () => {
  const [active, setActive] = useState(-1);

  return (
    <>
      {times(4).map((d, i) => (
        <Accordion
          label={`Accordion example ${i + 1}`}
          key={i}
          onChange={() => setActive(i)}
          isOpen={i === active}
        >
          <Content />
        </Accordion>
      ))}
    </>
  );
};

Props

Props Type Description Required Default
label string Label ✔︎ null
children jsx Children for the Accordion's expandable content section ✔︎ null
onChange func Callback fired when accordion open state is changed null
extend object Extend styles of accordion null
extendContent object Extend styles of accordion content null