Rain likely. High near 45F. Winds NW at 10 to 20 mph. Chance of rain 90%.
Rain or snow showers in the morning will give way to partly cloudy skies in the afternoon. High 43F. Winds W at 5 to 10 mph. Chance of rain 30%.
react-accordion-with-header
React accordion component with customizable flexbox based header
Install
yarn add react-accordion-with-header
Import
import {AccordionWithHeader,AccordionNode,AccordionHeader,AccordionPanel} from 'react-accordion-with-header';
Use
return (<AccordionWithHeader>{[1, 2, 3, 4].map((item, i) => {return (<AccordionNode key={i}><AccordionHeader><span>🚀</span><span>🔥</span></AccordionHeader><AccordionPanel><p>Interesting things</p></AccordionPanel></AccordionNode>);})}</AccordionWithHeader>);
Example usages:
Our Component needs a hero. This is where you'll find him.
"I'm gonna to take you to the bank senator Trent, the blood bank."
Controlled
In this example, the <AccordionWithHeader /> recieves a dynamic array as the active prop
<AccordionWithHeadermultipleOkay={true}active={[0]}onChange={(panels) => console.log(panels)}>//... panels etc</AccordionWithHeader>
horizontalAlignment="centerSpaceBetween"verticalAlignment="top"horizontalAlignment="centerSpaceBetween"
verticalAlignment="top"horizontalAlignment="centerSpaceAround"verticalAlignment="center"horizontalAlignment="centerSpaceAround"
verticalAlignment="center"horizontalAlignment="center"verticalAlignment="bottom"horizontalAlignment="center"
verticalAlignment="bottom"Beautiful
Monday
low: 41
high: 11
Tuesday
low: 22
high: 38
Wednesday
low: 81
high: 23
Thursday
low: 7
high: 106
Friday
low: 44
high: 0
Simple
(uncontrolled with defaults)
My Header #1
My Header #2
My Header #3
Adding panels dynamically
This is the header 0
It has flexbox layout
This is the header 1
It has flexbox layout
This is the header 2
It has flexbox layout
This is the header 3
It has flexbox layout
useAccordionState()
For some advanced use cases, you may tap the accordion context with `useAccordionState()`
import { useAccordionState } from 'react-accordion-with-header';const MyComponentWithContext = () => {const [state] = useAccordionState();console.log('state: ', state);return <div></div>;};
Note you will receive an error if <MyComponentWithContext /> is not a child of <AccordionWithHeader />
Real world demo
Or something that represents it 😄... with responsive styling
A Kind of Magic: Behavior Change Design
| DESIGN2 min
620 likes
How to Stay Safe on the Internet, Part 1
| TECH4 min
221 likes
How Visual Design Makes for Great UX
| DESIGN3 min
156 likes
A Kind of Magic: Behavior Change Design
| DESIGN2 min
620 likes
How to Stay Safe on the Internet, Part 2
| TECH8 min
421 likes
This surprising playing card design secret can never be unseen
| DESIGN13 min
126 likes