# simple-react-accordion

> Simple accordion component for React app.

Latest version **1.0.14** (published 2019-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-react-accordion
pnpm add simple-react-accordion
yarn add simple-react-accordion
bun add simple-react-accordion
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2019-08-06 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 819 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sokcodes |
| Keywords | react, accordion, widget, component, simple |

## Links

- npm: https://www.npmjs.com/package/simple-react-accordion
- npm.io page: https://npm.io/package/simple-react-accordion

## Dependencies (3)

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.4
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.21
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.10.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.14 (latest) — 2019-08-06
- 1.0.13 — 2019-08-06
- 1.0.12 — 2019-08-06
- 1.0.11 — 2019-08-06
- 1.0.10 — 2019-08-06
- 1.0.9 — 2019-08-06
- 1.0.8 — 2019-08-06
- 1.0.7 — 2019-08-06
- 1.0.6 — 2019-08-06
- 1.0.5 — 2019-08-06
- 1.0.4 — 2019-08-06
- 1.0.3 — 2019-08-06
- 1.0.2 — 2019-08-05
- 1.0.1 — 2019-08-05

## README

# Simple React Accordion

A simple React accordion component that takes an array of JavaScript objects and processes it into a responsive accordion element. 

Very simple, easy to implement, and features 5 pre-built themes.

## [View demo page here](https://simple-react-accordion.herokuapp.com/)

#Installation
  
  Install with npm

    npm install simple-react-accordion --save

  or install with Yarn

    yarn add simple-react-accordion

## How to use

Import the module in your React app.
```javascript
import SimpleAccordion from 'simple-react-accordion';
```

Define your `accordionItems` either as a state or variable.

```javascript
/// Using state
class App extends Component {
  constructor() {
    super();

    this.state = {
      accordionItems: [
        {
          header: "This is the 1st item.",
          content: "Some content."
        },
        {
          header: "This is the 2nd item.",
          content: "Some more content."
        },
        {
          header: "This is the 3rd item.",
          content: "Even some more content!"
        }
      ]
    }
  }
}
```

Invoke the component with your items.

```javascript
render() {
  return(
    <div className="container">
      <SimpleAccordion 
        theme="professional"
        items={this.state.accordionItems}
      />
    </div>
  )
}
```

# Preview

Theme used in photo is `professional`.

![demo image of accordion](https://raw.githubusercontent.com/sok213/simple-react-accordion-npm-package/master/demo_image.png)

## Properties

Property | type | Options | Default | Description
--- | --- | --- | --- | --- |
theme | string | basic, minimal, well, professional, dark | basic | Sets the theme style.
items | array | | | Array of Objects. Objects require `header` and `content` properties.


#

[View Github Repository](https://github.com/sok213/simple-react-accordion-npm-package)

[Follow the developer on Instagram](https://www.instagram.com/just_soak_it_in)

---
_Source: https://npm.io/package/simple-react-accordion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._