daviferreira / React Sanfona
Licence: mit
Accessible react accordion component
Stars: ✭ 248
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Sanfona
react-native-panel
A Customizable React Native Panel for Android and iOS
Stars: ✭ 35 (-85.89%)
Mutual labels: accordion, collapsible
react-collapse
Component-wrapper for collapse animation with CSS for elements with variable and dynamic height
Stars: ✭ 143 (-42.34%)
Mutual labels: accordion, collapsible
Azexpandableiconlistview
An expandable/collapsible view component written in Swift.
Stars: ✭ 284 (+14.52%)
Mutual labels: accordion, collapsible
Core Components
Accessible and lightweight Javascript components
Stars: ✭ 85 (-65.73%)
Mutual labels: accessibility, accordion
Houdini
A simple, accessible show-and-hide/accordion script.
Stars: ✭ 148 (-40.32%)
Mutual labels: accessibility, accordion
a11y-accordion-tabs
A script for an accessible accordion tabs component
Stars: ✭ 50 (-79.84%)
Mutual labels: accessibility, accordion
React Collapsible
React component to wrap content in Collapsible element with trigger to open and close.
Stars: ✭ 402 (+62.1%)
Mutual labels: accordion, collapsible
React Accessible Accordion
Accessible Accordion component for React
Stars: ✭ 610 (+145.97%)
Mutual labels: accessibility, accordion
Accordion
Accordion module created in pure javascript & CSS. Very useful to create FAQ lists on your website.
Stars: ✭ 94 (-62.1%)
Mutual labels: accessibility, accordion
React Native Collapsible
Animated collapsible component for React Native, good for accordions, toggles etc
Stars: ✭ 2,178 (+778.23%)
Mutual labels: accordion, collapsible
Tints And Shades
🌈 Display tints and shades of a given hex color in 10% increments.
Stars: ✭ 228 (-8.06%)
Mutual labels: accessibility
Accessibility Insights Windows
Accessibility Insights for Windows
Stars: ✭ 202 (-18.55%)
Mutual labels: accessibility
Accessibility interview questions
A starting point for questions to ask someone that wants you to give them a job
Stars: ✭ 236 (-4.84%)
Mutual labels: accessibility
You Dont Need Javascript
CSS is powerful, you can do a lot of things without JS.
Stars: ✭ 16,514 (+6558.87%)
Mutual labels: accordion
Swiftycomments
UITableView based component designed to display a hierarchy of expandable/foldable comments.
Stars: ✭ 200 (-19.35%)
Mutual labels: collapsible
React Md
React material design - An accessible React component library built from the Material Design guidelines in Sass
Stars: ✭ 2,284 (+820.97%)
Mutual labels: accessibility
Accessibilityjs
Client side accessibility error scanner.
Stars: ✭ 2,190 (+783.06%)
Mutual labels: accessibility
react-sanfona
React accordion component
Usage
Install via NPM:
npm install react-sanfona
Then:
import { Accordion, AccordionItem } from 'react-sanfona';
…
render() {
return (
<Accordion>
{[1, 2, 3, 4, 5].map(item => {
return (
<AccordionItem title={`Item ${item}`} expanded={item === 1}>
<div>
{`Item ${item} content`}
</div>
</AccordionItem>
);
})}
</Accordion>
);
}
…
options / PropTypes
Accordion
| Property | Type | Description | Default |
|---|---|---|---|
| allowMultiple | Boolean |
Allow multiple items to be open at the same time. | false |
| isHovered | Boolean |
Allow expanding an element after the mouse hovers an item. | false |
| openNextAccordionItem | Boolean |
Opens the next accordion item after the previous one is closed. Defaults first one as active and applies for each accordion item except the last one. | false |
| className | String |
Custom classname applied to root element | null |
| style | Object |
Inline styles applied to root element | null |
| onChange | Function |
Triggered when component updates and passes new state as an argument | null |
| rootTag | String |
Custom HTML tag used for root element | 'div' |
| duration | Number |
Open/close transition duration in milliseconds | 300 |
| easing | String |
Open/close transition easing | 'ease' |
AccordionItem
| Property | Type | Description | Default |
|---|---|---|---|
| title |
String/ Object
|
Text or Object to display in header. | null |
| expanded | Boolean |
If item body should be expanded or not | false |
| onExpand | Function |
Callback for when item is expanded | null |
| onClose | Function |
Callback for when item closes | null |
| className | String |
Custom classname applied to root item element | null |
| bodyClassName | String |
Custom classname applied to the accordion item body | null |
| expandedClassName | String |
Custom classname applied when accordion is expanded | null |
| titleClassName | String |
Custom classname applied to accordion item header text | null |
| disabled | Boolean |
If item should be disabled or not | false |
| disabledClassName | String |
Custom classname applied to accordion item header text when item is disabled | null |
| rootTag | String |
Custom HTML tag used for root element | 'div' |
| titleTag | String |
Custom HTML tag used for title element | 'h3' |
| bodyTag | String |
Custom HTML tag used for body element | 'div' |
| duration | Number |
Open/close transition duration in milliseconds | 300 |
| easing | String |
Open/close transition easing | 'ease' |
| slug | String |
Slug key to allow indexing by a string |
Styling with classnames
| Classname | Targets |
|---|---|
react-sanfona |
Accordion container |
react-sanfona-item |
AccordionItem container |
react-sanfona-item-expanded |
AccordionItem container when expanded |
react-sanfona-item-title |
AccordionItem header text |
react-sanfona-item-body |
AccordionItem body container |
react-sanfona-item-body-wrapper |
AccordionItem body children wrapper |
react-sanfona-item-disabled |
AccordionItem is disabled |
development
npm install
npm start // served on localhost:8080
npm test
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].