Potential API for accessible accordion React component. Inspired by @reach/tabs

react-accordion-example.jsx

import React from "react";
import ReactDOM from "react-dom";
import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionPanel
} from "./Accordion";

function App() {
  // state for controlled example with multiple active items
  const [activeItems, setActiveItems] = React.useState([0]);
  const handleAccordionChange = index => {/* do stuff */};

  return (
    <div className="App">
    
      <section>
      
        <h2>Uncontrolled</h2>
        
        <Accordion>
          <AccordionItem active>
            <AccordionHeader>You can toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
          <AccordionItem disabled>
            <AccordionHeader>You can't toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
          <AccordionItem>
            <AccordionHeader>You can also toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
        </Accordion>
      </section>
      
      <section>
      
        <h2>Uncontrolled, open one item at a time</h2>
        
        <Accordion allowMultiple={false}>
          <AccordionItem>
            <AccordionHeader>You can toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
          <AccordionItem disabled>
            <AccordionHeader>You can't toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
          <AccordionItem>
            <AccordionHeader>You can also toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
        </Accordion>
      </section>

      <section>
      
        <h2>Controlled</h2>
        
        <Accordion index={activeItems} onChange={handleAccordionChange}>
          <AccordionItem>
            <AccordionHeader>You can toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
          <AccordionItem disabled>
            <AccordionHeader>You can't toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
          <AccordionItem>
            <AccordionHeader>You can also toggle me</AccordionHeader>
            <AccordionPanel>Ante rhoncus facilisis iaculis nostra...</AccordionPanel>
          </AccordionItem>
        </Accordion>
      </section>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);