0.1.3 • Published 2 years ago

react-accordion-comp v0.1.3

Weekly downloads
22
License
MIT
Repository
github
Last release
2 years ago

react-accordion-comp

release open issues license Test Status Build Status

React package📦 to render accordion component. view demo

Install

npm install --save react-accordion-comp

Usage

Import styles to application.

import in a SCSS file.

@import "~react-accordion-comp/dist/styles.css";

or in JSX file

import "react-accordion-comp/dist/styles.css";

Import component to application.

import React, { useState } from 'react';
import Accordion from "react-accordion-comp";

function App() {
    const [flag, setFlag] = useState(false);

    return (
        <div className="container">
            <button onClick={()=>setFlag(!flag)}>
                toggle content
            </button>
            <Accordion isOpen={flag}>
                <div className="red">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        In sed tempor sem. Aenean vel turpis feugiat,
                        ultricies metus at, consequat velit. Curabitur est nibh,
                        varius in tellus nec, mattis pulvinar metus.
                        In maximus cursus lorem, nec laoreet velit eleifend vel.
                        Ut aliquet mauris tortor, sed egestas libero interdum vitae.
                        Fusce sed commodo purus, at tempus turpis.
                    </p>
                </div>
            </Accordion>
        </div>
}

props

The props passed to react-accordion-comp.

attributetypeoptionaldefaultValdetails
isOpenbooleanfalsefalseflag to toggle the component
durationstringtrue0.3sduration of transition
timingFuncstringtrueeasetiming-function of transition

Demo gif

Screenshot 1

License

MIT © binodswain