Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-accessible-accordion

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-accessible-accordion

Accessible Accordion component for React

  • 0.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
99K
decreased by-3.73%
Maintainers
1
Weekly downloads
 
Created
Source

react-accessible-accordion npm Build Status Coverage Status Dependency Status devDependency Status

Accessible Accordion component for React. Inspired by rc-collapse and react-sanfona. :mag::ok_hand:

This is a work in progress. Feel free to contribute. Try a demo now.

Usage

First, grab the package from npm:

npm install --save react-accessible-accordion
# react-accessible-accordion's peerDependencies:
npm install --save react@^15.0.0 react-dom@^15.0.0

Then, import the editor and use it in your code. Here is a basic example:

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

import './node_modules/react-accessible-accordion/dist/react-accessible-accordion.css';

const Example = () => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Simple title</h3>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>
                    Body content
                </p>
            </AccordionItemBody>
        </AccordionItem>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Complex title</h3>
                <div>With a bit of description</div>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>
                    Body content
                </p>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

ReactDOM.render(<Example />, document.querySelector('[data-mount]'));

API

Accordion

props:
nametypedefaultdescription
accordionBooleantrueOpen only one item at a time or not
onChangeFunction(keys)noopTriggered on change (open/close items)
classNameStringaccordionCSS class(es) applied to the component

AccordionItem

props:
nametypedefaultdescription
expandedBooleanfalseExpands this item on first render
classNameStringaccordion__itemCSS class(es) applied to the component

AccordionItemTitle

props:
nametypedefaultdescription
classNameStringaccordion__titleCSS class(es) applied to the component

AccordionItemBody

props:
nametypedefaultdescription
classNameStringaccordion__bodyCSS class(es) applied to the component
hideBodyClassNameStringaccordion__body--hiddenClass name for hidden body state

Development

Install

Clone the project on your computer, and install Node. This project also uses nvm.

nvm install
# Then, install all project dependencies.
npm install
# Install the git hooks.
./.githooks/deploy
# Set up a `.env` file with the appropriate secrets.
touch .env

Working on the project

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the the development tools in watch mode.
npm run start
# Runs linting.
npm run lint
# Runs tests.
npm run test
# View other available commands with:
npm run

Run the demo

Everything mentioned in the installation process should already be done.

# Make sure you use the right node version.
nvm use
# Start the server and the development tools.
npm run start-demo

Publish

git release vx.y.z
npm run dist
# Use irish-pub to check the package content. Install w/ npm install -g first.
irish-pub
npm publish

Keywords

FAQs

Package last updated on 04 Jul 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc