项目作者: binodswain

项目描述 :
React package📦 to render accordion component.
高级语言: JavaScript
项目地址: git://github.com/binodswain/react-accordion-comp.git
创建时间: 2020-07-13T20:25:09Z
项目社区:https://github.com/binodswain/react-accordion-comp

开源协议:MIT License

下载


react-accordion-comp

release
open issues
license
Test Status
Build Status

React package📦 to render accordion component.
view demo

Install

  1. npm install --save react-accordion-comp

Usage

Import styles to application.

import in a SCSS file.

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

or in JSX file

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

Import component to application.

  1. import React, { useState } from 'react';
  2. import Accordion from "react-accordion-comp";
  3. function App() {
  4. const [flag, setFlag] = useState(false);
  5. return (
  6. <div className="container">
  7. <button onClick={()=>setFlag(!flag)}>
  8. toggle content
  9. </button>
  10. <Accordion isOpen={flag}>
  11. <div className="red">
  12. <p>
  13. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  14. In sed tempor sem. Aenean vel turpis feugiat,
  15. ultricies metus at, consequat velit. Curabitur est nibh,
  16. varius in tellus nec, mattis pulvinar metus.
  17. In maximus cursus lorem, nec laoreet velit eleifend vel.
  18. Ut aliquet mauris tortor, sed egestas libero interdum vitae.
  19. Fusce sed commodo purus, at tempus turpis.
  20. </p>
  21. </div>
  22. </Accordion>
  23. </div>
  24. }

props

The props passed to react-accordion-comp.

attribute type optional defaultVal details
isOpen boolean false false flag to toggle the component
duration string true 0.3s duration of transition
timingFunc string true ease timing-function of transition

Demo gif

Screenshot 1

License

MIT © binodswain