https://github.com/a7ul/react-super-accordion
A hackable super simple accordion that you can customise completely to the core. It can't get more customisable than this.
https://github.com/a7ul/react-super-accordion
accordion component customizable hackable open-library react simple
Last synced: 3 months ago
JSON representation
A hackable super simple accordion that you can customise completely to the core. It can't get more customisable than this.
- Host: GitHub
- URL: https://github.com/a7ul/react-super-accordion
- Owner: a7ul
- Created: 2018-02-19T06:38:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-19T17:38:30.000Z (over 7 years ago)
- Last Synced: 2025-02-04T03:11:09.315Z (4 months ago)
- Topics: accordion, component, customizable, hackable, open-library, react, simple
- Language: JavaScript
- Size: 183 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-super-accordion 
[](https://www.npmjs.com/package/react-super-accordion)
A hackable super simple accordion that you can customise completely to the core. It can't get more customisable than this.
### Installation:
`yarn add react-super-accordion`
or
`npm i react-super-accordion --save`
### Usage
Basic usage:
```jsx
import React, { Component } from 'react';
import Accordion from 'react-super-accordion';
class App extends Component {
render() {
return (
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
);
}
}
export default App;
```
### Event Handler
Accordion also has a prop `onToggle` which can be used to pass in a callback function to execute when the accordion is toggled.
```jsx
console.log(state)}>
...some body...
```
The above example would print on the console the state of the accordion on toggle
```
{expanded: true} // when the accordion expands
```
### CUSTOMIZATION
**Customizing the body of the accordion**: Since the body is a text/component that you provide, this one is pretty straight forward. Just add any component as the child for Accordion and that becomes the body. so Body is under your complete control.
```jsx
//Your custom body
```
**Customizing the head of the accordion**: To customize the head of the accordion simply pass a Custom React component to the Accordion via the prop `headComponent` to render a custom Head component.
For example:
```jsx
.... some body ...
```
Note that Accordion would pass two props to the `CustomHeadComponent`
1. expanded : This is a `Boolean` which specifies whether the accordion is in expanded state or collapsed state (true for expanded and false for collapsed).
2. toggle : This is a function to toggle the expanded state of the accordion.
Either you can directly call toggle like `toggle()` - In which case it will just toggle the state of accordion
or
You can optionally pass a boolean to the `toggle(true)` to make the Accordion expand or `toggle(false)` to make the accordion collapse.
**Complete example for a custom Accordion Head**
```jsx
import React, { Component } from 'react';
import Accordion from 'react-super-accordion';
const styles = {
container : {
flex: 1,
backgroundColor:'lightseagreen',
color:'white',
borderRadius:'15px',
display: 'flex',
border: '1px solid lightgrey',
padding: '10px',
cursor: 'pointer',
fontFamily: 'helvetica',
fontWeight: 'bold',
userSelect: 'none',
flexDirection: 'row',
},
sideArrowExpanded : {
textAlign: 'right',
transition: 'transform 0.25s',
},
sideArrow : {
textAlign: 'right',
transform: 'rotateZ(-180deg)',
transition: 'transform 0.25s',
},
title : {
display: 'flex',
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
}
}
//CREATING A CUSTOM HEAD COMPONENT
class CustomHeadComponent extends React.Component {
render(){
const {text, ...accorionProps} = this.props;
const {expanded, toggle} = accorionProps; //Basically Accordion would pass two props to the custom header 1. expanded 2. toggle
return (
toggle()} style={styles.container} >
{text || 'Hello World'}
⌃
)
}
}
class App extends Component {
render() {
return (
props.toggle()} expanded={props.expanded} text="My Custom Head" />}>
{/* OR */}
{/* }> */}
{/* OR even*/}
{/* */}
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
);
}
}
export default App;
```
The above custom Accordion looks like this:
## CONTRIBUTORS
- [Atul R](https://github.com/master-atul)
Peace ! ✌🏻🍻