Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javierarmendariz/react-accordeon
React accordion component with expand/collapse CSS animation. The event trigger can be configured to any component, such in the Navigation and Content.
https://github.com/javierarmendariz/react-accordeon
accordeon npm-package react react-components
Last synced: 3 months ago
JSON representation
React accordion component with expand/collapse CSS animation. The event trigger can be configured to any component, such in the Navigation and Content.
- Host: GitHub
- URL: https://github.com/javierarmendariz/react-accordeon
- Owner: javierarmendariz
- License: mit
- Created: 2016-10-17T02:59:19.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-23T05:51:18.000Z (about 8 years ago)
- Last Synced: 2024-10-11T19:30:57.345Z (3 months ago)
- Topics: accordeon, npm-package, react, react-components
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Accordeon
===================
React Accordeon component with expand/collapse CSS animation. The event trigger can be configured to any component, such in the Navigation and Content
- [Components](#components)
- [``](#Accordeon)
- [``](#panel)
- [``](#nav)
- [``](#content)
- [Examples](#examples)
- [Todo](#todo)
## Components
### ``
Primary component of React Accordeon. It keeps and handles the state of all the elements.
#### Props
##### `header` (optional)
A valid React component that will be rendered in a `` html tag. This component will be provided with the two property functions expandAll and collapseAll.
##### `footer` (optional)
A valid React component that will be rendered in a `` html tag. This component will be provided with the two property functions expandAll and collapseAll.
#### Example
```js
import Header from './Header.js';
import Footer from './Footer.js';
} footer={}>
```
### ``
The Panel component is the container for each element in the accordeon. This will create the collapse/expand animation for the Content component.
#### Props
##### `expanded` (optional)
Boolean value to configure an initial state for the Panel. If true, the Panel is expanded. If false, the Panel is collapsed.
#### Example
#####Item expanded
```js
```
#####Item collapsed
```js
```
or the expanded property can also be omitted
```js
```
### ``
This component accepts any string or any valid React component to render the Panel Header.
#### Props
This does not require any property at this moment.
### ``
Any string, html tag, or a valid React component
#### Props
This does not require any property at this moment.
## Examples
Accordeon with plain strings in the Nav and Content
```js
import React, { PropTypes } from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
function ExampleOne(props) {
return (
Question 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Question 2
And more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
);
}
```
[Demo](http://jearwebdevelopment.com/react-accordeon/#strings)
Given valid React Components
```js
import React, { PropTypes } from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
import AnotherReactComponentNav from './Another-react-component-nav.js';
import AnotherReactComponentContent from './Another-react-component-content.js';
function ExampleOne(props) {
return (
);
}
// A valid React stateless Component (AnotherReactComponentNav.js)
// We can configure the 'toggle' trigger in any React supported event (onClick={toggle})
import React, { PropTypes } from 'react';
const AnotherReactComponentNav = (props) => {
const { expanded, toggle } = props;
return (
{expanded ? '-' : '+'}
Question 1
);
};
AnotherReactComponentNav.propTypes = {
toggle: PropTypes.func,
expanded: PropTypes.bool,
};
export default Nav;
// A valid React stateless Component (AnotherReactComponentContent.js)
import React, { PropTypes } from 'react';
const Content = (props) => {
const { expanded, toggle } = props;
return (
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
);
};
Content.propTypes = {
toggle: PropTypes.func,
expanded: PropTypes.bool,
};
export default Content;
```
[Demo](http://jearwebdevelopment.com/react-accordeon/#react-component)
With some valid HTML
```js
import React from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
function ExampleOne(props) {
return (
Item 1
);
}
```
[Demo](http://jearwebdevelopment.com/react-accordeon/#valid-html)
Accordeon with Header and Footer
```js
import React from 'react';
import { Accordeon, Panel, Nav, Content } from 'react-accordeon';
import Header from './Header';
import Footer from './Footer';
import NavComponent from './NavComponent';
import ContentComponent from './ContentComponent';
} footer={}>
Question 1
// The Header must be a valid React component (Header.js).
// Two functions are passed as properties: expandAll, collapseAll
import React from 'react';
const Header = (props) => {
const { expandAll, collapseAll } = props;
return (
Expand All / Collapse All
);
};
Header.propTypes = {
expandAll: React.PropTypes.func,
collapseAll: React.PropTypes.func,
};
export default Header;
// The Footer must be a valid React component (Footer.js).
// Two functions are also passed as properties: expandAll, collapseAll
import React from 'react';
const Footer = (props) => {
const { expandAll, collapseAll } = props;
return (
Expand All / Collapse All
);
};
Footer.propTypes = {
expandAll: React.PropTypes.func,
collapseAll: React.PropTypes.func,
};
export default Footer;
```
[Demo](http://jearwebdevelopment.com/react-accordeon/#header-footer)
Nested Accordeons
[Demo](http://jearwebdevelopment.com/react-accordeon/#nested)
## Todo
> - Header and Footer error handling
> - Expand/Collapse one Panel at a time