Newts Parading Majestically

    react-accordion-with-header

    0.1.3 • Public • Published

    react-accordion-with-header

    React accordion component with customizable flexbox header

    NPM

    "You've got 5 seconds... and 3 are up." - Steven Seagal

    Check out the demo NOW

    Install via NPM:

    npm install react-accordion-with-header
    

    Import the modules:

    import {
      AccordionWithHeader,
      AccordionNode,
      AccordionHeader,
      AccordionPanel
    } from 'react-accordion-with-header';

    Items can be passed in to <AccordionHeader /> and <AccordionPanel />:

    • as children (preferred)
    • as a component passed into the template prop (deprecated)

    The elements passed in to <AccordionHeader /> can be horizontally justified and vertically aligned via their respective props 🎉 💥 🍻

    • horizontalAlignment
    • verticalAlignment

    Pass in a component as a child to AccordionHeader and AccordionPanel:

    (or plain html of course)

    // note: due to the warning "Stateless function components cannot be given refs. Attempts to access this ref will fail."
    // the components passed into <AccordionPanel> must be class components
    // this allows to measure the height of the element via refs
    class BodyTpl extends React.Component {
      render() {
        return <div>Look at this {this.props.item}</div>;
      }
    }
     
    class MyAccordion extends React.Component {
      render() {
        return (
          <AccordionWithHeader>
            {[1, 2, 3, 4].map((item, i) => {
              return (
                <AccordionNode key={i}>
                  <AccordionHeader
                    horizontalAlignment="centerSpaceAround"
                    verticalAlignment="center"
                  >
                    <div>This is the header</div>
                    <div>It has flexbox layout</div>
                  </AccordionHeader>
                  <AccordionPanel>
                    <BodyTpl item={item} />
                  </AccordionPanel>
                </AccordionNode>
              );
            })}
          </AccordionWithHeader>
        );
      }
    }
     

    actionCallback

      actionCallback = (panels, state) => {
        // fires any time headers are clicked and panels change state
        // receives array of panels: [{ panel: 3, open: true }, { panel: 6, open: true }]
        // and the AccordionWithHeader state
        console.log('panels, state', panels, state);
      }
     
      render() {
        return (
          <AccordionWithHeader actionCallback={this.actionCallback}>
            // ... stuff
          </AccordionWithHeader>
        );
      }

    Props

    (all components accept a className and style prop per usual convention)

    <AccordionWithHeader />

    Property Type Description Default
    firstOpen Boolean Determines if the first panel should be expanded on init false
    active Array Determines which panels are open (on componentDidMount or to control externally) []
    multipleOkay Boolean True allows multiple panels to be expanded at the same time. False allows only one panel to be expanded at any time. false
    actionCallback Function Callback function fired when a header is clicked and panel is opened or closed. Returns an array representing panels and the AccordionWithHeader state none
    style Object style object none
    className String CSS classname none

    <AccordionNode />

    Property Type Description Default
    style Object style object none
    className String Custom classname applied to root item div none

    <AccordionHeader />

    Property Type Description Default
    title String For simple headers, a title will render an <h1> and disallow child elements none
    titleColor String some valid CSS color or rgb or hex black
    horizontalAlignment String One of: 'centerSpaceBetween', 'spaceBetween', 'centerSpaceAround', 'spaceAround', 'spaceEvenly', 'center', 'left', 'right'. Maps to corresponding flex-box CSS property centerSpaceAround
    verticalAlignment String One of: 'top', 'center', 'bottom' center
    style Object style object none
    className String CSS classname none
    template Element Component to be rendered as a template none

    <AccordionPanel />

    Property Type Description Default
    template Element Component to be rendered as a template none
    speed Number Speed in milliseconds to apply to CSS transition of open/close effect 250
    style Object style object none
    className String CSS classname none

    What about styling?

    You can styles to any component with a style prop or className prop

    For example: <AccordionHeader style={{border: '1px solid'}}>

    Or: <AccordionHeader className="myCssClass">


    Install

    npm i react-accordion-with-header

    DownloadsWeekly Downloads

    195

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    152 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar