1.0.15 • Published 4 months ago
@tenaspace/react-headless-accordion v1.0.15
@tenaspace/react-headless-accordion
This is an unstyled React component that helps you to easily make the Accordion UI with your style.
Demo
See the DEMO
Installation
yarn add @tenaspace/react-headless-accordion
or via npm
npm install @tenaspace/react-headless-accordion
Usage
Example with Tailwind CSS (Recommend)
import { HeadlessAccordion } from '@tenaspace/react-headless-accordion'
const list = [
{
title: 'item 1',
content:
'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit atque id accusamus nesciunt illo inventore placeat vitae unde aspernatur, officiis, exercitationem dolorem! Sint sed libero perspiciatis beatae, natus quasi quisquam.',
},
{
title: 'item 2',
content:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eligendi quidem nam delectus neque consectetur impedit laudantium atque saepe enim maiores corrupti nemo beatae aliquam, expedita dolore esse. Ipsam, quaerat?',
},
{
title: 'item 3',
content:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia est, deleniti ex veniam voluptatibus ullam saepe. Quia, id dignissimos tenetur numquam velit magni inventore aperiam ducimus perferendis deleniti laborum dicta!',
},
]
const App = () => {
return (
<>
<HeadlessAccordion defaultActiveKey={[`0`]} className={`border border-black`}>
{list.map((item, key) => (
<HeadlessAccordion.Item key={key} eventKey={`${key}`} className={`border border-black`}>
{({ open }) => {
return (
<>
<HeadlessAccordion.Button
as={`button`}
className={`block w-full px-8 py-4 text-left transition-colors duration-300 ${
open ? `bg-black text-white` : ``
}`}
>
<span className={`-mx-2 flex flex-nowrap items-center justify-between`}>
<span className={`flex-[1_0_0%] px-2`}>{item.title}</span>
<span className={`w-auto flex-[0_0_auto] px-2`}>{open ? `-` : `+`}</span>
</span>
</HeadlessAccordion.Button>
<HeadlessAccordion.Panel className={`transition-[max-height] duration-300`}>
<div className={`p-8`}>{item.content}</div>
</HeadlessAccordion.Panel>
</>
)
}}
</HeadlessAccordion.Item>
))}
</HeadlessAccordion>
</>
)
}
export default App
Example with Style inline
import { HeadlessAccordion } from '@tenaspace/react-headless-accordion'
const list = [
{
title: 'item 1',
content:
'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit atque id accusamus nesciunt illo inventore placeat vitae unde aspernatur, officiis, exercitationem dolorem! Sint sed libero perspiciatis beatae, natus quasi quisquam.',
},
{
title: 'item 2',
content:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eligendi quidem nam delectus neque consectetur impedit laudantium atque saepe enim maiores corrupti nemo beatae aliquam, expedita dolore esse. Ipsam, quaerat?',
},
{
title: 'item 3',
content:
'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia est, deleniti ex veniam voluptatibus ullam saepe. Quia, id dignissimos tenetur numquam velit magni inventore aperiam ducimus perferendis deleniti laborum dicta!',
},
]
const App = () => {
return (
<>
<HeadlessAccordion defaultActiveKey={[`0`]} style={{ border: `1px solid black` }}>
{list.map((item, key) => (
<HeadlessAccordion.Item key={key} eventKey={`${key}`} style={{ border: `1px solid black` }}>
{({ open }) => {
return (
<>
<HeadlessAccordion.Button
as={`button`}
style={{
cursor: `pointer`,
display: `block`,
width: `100%`,
backgroundColor: open ? `black` : ``,
padding: `16px 32px`,
textAlign: `left`,
color: open ? `white` : ``,
transitionProperty: `color`,
transitionDuration: `0.3s`,
}}
>
<span
style={{
margin: `0 -8px`,
display: `flex`,
flexWrap: `nowrap`,
alignItems: `center`,
justifyContent: `space-between`,
}}
>
<span
style={{
flex: `1 0 0%`,
padding: `0 8px`,
}}
>
{item.title}
</span>
<span
style={{
width: `auto`,
flex: `0 0 auto`,
padding: `0 8px`,
}}
>
{open ? `-` : `+`}
</span>
</span>
</HeadlessAccordion.Button>
<HeadlessAccordion.Panel
style={{
transitionProperty: `max-height`,
transitionDuration: `0.3s`,
}}
>
<div
style={{
padding: `32px`,
}}
>
{item.content}
</div>
</HeadlessAccordion.Panel>
</>
)
}}
</HeadlessAccordion.Item>
))}
</HeadlessAccordion>
</>
)
}
export default App
Props
Name | Mandatory | Type | Default value | Component | Note |
---|---|---|---|---|---|
defaultActiveKey | optional | string[] | [] | HeadlessAccordion | Make the item you want open by default in the first load. Ex: ['0', '1'] => Item 1 and Item 2 will be opend in the first load. (The value must match with the eventKey of the HeadlessAccordion.Item ) |
multipleOpen | optional | boolean | false | HeadlessAccordion | Set it true if you want to open multiple the Item |
eventKey | required | string | HeadlessAccordion.Item | The key ID of the Item | |
as | optional | React.ElementType | div | All | Set the tag HTML like whatever you want |
className | optional | string | null | All | |
style | optional | React.CSSProperties | {} | All |
1.0.15
4 months ago
1.0.14
10 months ago
1.0.13
11 months ago
1.0.12
11 months ago
1.0.9
12 months ago
1.0.11
12 months ago
1.0.10
12 months ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.3
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago