react-accordion-collapsible
TypeScript icon, indicating that this package has built-in type declarations

1.0.53 • Public • Published

React Accordion Collapsible

A simple, clean, responsive and highly customizable accordion component for React projects. Does not require the downloading of any external dependencies.

react-accordion-collapsible

Installing

npm install react-accordion-collapsible

Using the package

import React from 'react'
import { Accordion } from 'react-accordion-collapsible'

const Example = () => {
    return (
        <Accordion
            title="Example title for React Accordion Collapsible"
            content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
        />
    )
}

export default Example

Examples

Check out some usage examples in the /examples folder

Props

prop isRequired default type description
id no - number unique id
title yes - string title of the accordion
content yes - string text content of the accordion
wrap - false boolean whether to wrap the accordion or let it take full width of parent(default)
defaultOpen - false boolean should the accordion be opened(expanded) by default
expandIcon - + ReactElement React element to replace the default expand icon (+)
collapseIcon - - ReactElement React element to replace the default collapse icon (-)
animation - true boolean whether to animate the opening and closing of the accordion
animationDuration - 0.25 number or string the animation duration
children - - ReactNode children of the component, if it is not defined as self closing
reverseIconPosition - false boolean reverse the expand and collapse icons positions to left side
iconSize - 16 number size of expand and collapse icons
onClick - - function function called when the accordion is clicked
onExpand - - function function called when the accordion is opened
onCollapse - - function function called when the accordion is closed
activeTitleColor - #22242E string color of the title when accordion is opened
contentCharLimit - null number maximum length of the content

Github Repository

github.com/yatish1606/react-accordion-collapsible

Customizing the UI

Every UI layer exposes a className property for that HTML element. You can directly include styles for required element in your index.css file or component.css.

Readme

Keywords

none

Package Sidebar

Install

npm i react-accordion-collapsible

Weekly Downloads

2

Version

1.0.53

License

ISC

Unpacked Size

334 kB

Total Files

19

Last publish

Collaborators

  • yatish