diff --git a/demo/src/index.tsx b/demo/src/index.tsx index 1eb9c3ef..21166279 100644 --- a/demo/src/index.tsx +++ b/demo/src/index.tsx @@ -70,6 +70,7 @@ const Example = (): JSX.Element => (
  • AccordionItem
  • AccordionItemHeading
  • AccordionItemPanel
  • +
  • AccordionItemState
  • @@ -226,6 +227,43 @@ const Example = (): JSX.Element => ( + + +

    + AccordionItemState +
    +

    +
    + + + + + + + + + + + + + + + + + + + + + + + + +
    nametypedefaultdescription
    expandedBooleanfalseExpands this item on first render
    renderFunctionreturns null + Takes expanded state as argument for + conditional rendering +
    +
    +

    Multi Accordion children

    @@ -666,7 +704,7 @@ const Example = (): JSX.Element => (

    - Display a different icon when expanded + Render something different when expanded
    (

    - When you open/close this item, you should see the icon - next to the heading change. + When you open/close this item, you should see the text + under the heading change.

    @@ -697,9 +735,12 @@ const Example = (): JSX.Element => (

    - Use the AccordionItemState component inside an Accordion - item and pass it a render prop function that takes the - item's expanded/collapsed state. + Pass the AccordionItemState component a render prop + function. +

    +

    + This should take the item's expanded state as an + argument.