❤
npm
Sign UpSign In

react-collapsible-component

1.3.4 • Public • Published

ReactJS Collapsible component

NPM version Downloads

ReactJs collapsible accordion component. Light, simple and functional. Allows expand and collapse html content. Ready for use in your ReactJs application. Works with React 16.x.x versions.

Demo

https://www.devzonetech.com/demo/react-collapsible-component/

Installation

npm install react-collapsible-component --save

Usage

Howto use ReactJs collapsible accordion component.

1. Regular usage

import {
    CollapsibleComponent,
    CollapsibleHead,
    CollapsibleContent
} from "react-collapsible-component";
 
export default class MyComponent extends React.Component {
    constructor() {
        super();
    }
 
    render() {
        return (
            <div>
                ...
                <CollapsibleComponent>
                    <CollapsibleHead className="additionalClassForHead">
                        Head title 1
                    </CollapsibleHead>
                    <CollapsibleContent className="additionalClassForContent">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip
                            ex{" "}
                        </p>
                    </CollapsibleContent>
 
                    <CollapsibleHead isExpanded={true}>
                        Head title 2
                    </CollapsibleHead>
                    <CollapsibleContent isExpanded={true}>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat. Duis aute irure dolor in
                            reprehenderit in voluptate velit esse cillum dolore
                            eu fugiat nulla pariatur. Excepteur sint occaecat
                            cupidatat non proident, sunt in culpa qui officia
                            deserunt mollit anim id est laborum.
                        </p>
                    </CollapsibleContent>
 
                    <CollapsibleHead>Head title 3</CollapsibleHead>
                    <CollapsibleContent>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat.{" "}
                        </p>
                    </CollapsibleContent>
                </CollapsibleComponent>
            </div>
        );
    }
}

2. Use with collapsed content positioned above some of Head titles

import {
    CollapsibleComponent,
    CollapsibleHead,
    CollapsibleContent
} from "react-collapsible-component";
 
export default class MyComponent extends React.Component {
    constructor() {
        super();
    }
 
    render() {
        return (
            <div>
                ...
                <CollapsibleComponent name="second">
                    <CollapsibleHead>Head title 1</CollapsibleHead>
                    <CollapsibleContent>
                        <p>
                            11111 Lorem ipsum dolor sit amet, consectetur
                            adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris
                            nisi ut aliquip ex ea commodo consequat.
                        </p>
                    </CollapsibleContent>
 
                    <CollapsibleContent isExpanded={true}>
                        <p>
                            22222 Lorem ipsum dolor sit amet, consectetur
                            adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim
                            veniam, quis nostrud exercitation ullamco laboris
                            nisi ut aliquip ex ea commodo consequat. Duis aute
                            irure dolor in
                        </p>
                    </CollapsibleContent>
                    <CollapsibleHead
                        showContentAboveButton={true}
                        isExpanded={true}
                    >
                        Head title 2
                    </CollapsibleHead>
 
                    <CollapsibleContent>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit.
                        </p>
                    </CollapsibleContent>
                    <CollapsibleHead>Head title 3</CollapsibleHead>
 
                    <CollapsibleHead>Head title 4</CollapsibleHead>
                    <CollapsibleContent>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat. Duis aute irure dolor in
                            reprehenderit.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat.
                        </p>
                    </CollapsibleContent>
 
                    <CollapsibleHead>Head title 5</CollapsibleHead>
                    <CollapsibleContent>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing
                            elit, sed do eiusmod tempor incididunt ut labore et
                            dolore magna aliqua.
                        </p>
                    </CollapsibleContent>
                </CollapsibleComponent>
            </div>
        );
    }
}

Component Props

Prop Default Required Values Description
className no String Custom defined css class
name if more than one conponent on one page is used String Qunique name identifier
isExpanded false no Boolean: true or false Show or hide collapsible content.
showContentAboveButton false no Boolean: true or false Show collapsible content above Head title.

License

This project is licensed under the MIT License - see the LICENSE file for details

DEVZONE TECH Ltd.

Readme

Keywords

Package Sidebar

Install

npm i react-collapsible-component

Repository

github.com/devzonetech/react-collapsible-component

Homepage

github.com/devzonetech/react-collapsible-component#readme

Weekly Downloads

387

Version

1.3.4

License

MIT

Unpacked Size

24.7 kB

Total Files

5

Last publish

Collaborators

  • devzone.tech
Try on RunKit
Report malware