https://github.com/theinfosecguy/reactjs-custom-accordion

A Complete Custom Accordion for ReactJS & NextJS
https://github.com/theinfosecguy/reactjs-custom-accordion

accordion-component hacktoberfest javascript npm-package react reactjs yarn

Last synced: about 1 month ago
JSON representation

A Complete Custom Accordion for ReactJS & NextJS

• Host: GitHub
• URL: https://github.com/theinfosecguy/reactjs-custom-accordion
• Owner: theinfosecguy
• Created: 2022-04-19T10:03:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-01T20:32:17.000Z (over 2 years ago)
• Last Synced: 2024-11-15T21:42:34.220Z (2 months ago)
• Topics: accordion-component, hacktoberfest, javascript, npm-package, react, reactjs, yarn
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/reactjs-custom-accordion
• Size: 1.66 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#  Custom React Accordion for ReactJS & NextJS 

🚀 A Complete Custom Accordion for ReactJS & NextJS 🚀

[![NPM](https://img.shields.io/npm/v/reactjs-custom-accordion.svg)](https://www.npmjs.com/package/reactjs-custom-accordion) 

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![NPM Downloads](https://img.shields.io/npm/dm/reactjs-custom-accordion)

![Bundle Size](https://img.shields.io/bundlephobia/minzip/reactjs-custom-accordion)

## Live Demo

_[Demo Link](https://theinfosecguy.github.io/reactjs-custom-accordion/)_

## Install

Using NPM:

```

npm install reactjs-custom-accordion

```

Using Yarn:

```

yarn add reactjs-custom-accordion

```

## Usage

```jsx

import React from 'react'

import { Accordion } from 'reactjs-custom-accordion'

function Demo() {

  

  const sampleData = [

    {

      title: 'title 1',

      description: 'description 1'

    },

    {

      title: 'title 2',

      description: 'description 2'

    }

  ]

    return (

        <>

            
🚀 Default Accordion with sample data

            

        >

    )

}


export default Demo

```

## Props

| Name              | Type                 | Default                | Optional |

| ---------------   | -------------------- | ---------------------- | -------- |

| `data`              | Array of Objects     | `undefined`              | ❌    |

| `PlusIcon`          | Component     | `AiOutlinePlusSquare`              | ✅    |

| `MinusIcon`              | Component     | `AiOutlineMinusSquare`              | ✅    |

| `headerBackground`              | String     | `#1a1a1a`              | ✅    |

| `footerBackground`              | String     | `#fff`              | ✅    |

| `plusIconSize`              | String     | `25px`              | ✅    |

| `minusIconSize`              | String     | `25px`              | ✅    |

| `plusIconColor`              | String     | `#fff`              | ✅    |

| `minusIconColor`              | String     | `#fff`              | ✅    |

| `accordionWidth`              | String     | `80%`              | ✅    |

| `roundedBorders`              | Boolean     | `false`              | ✅    |

| `defaultOpen`              | Boolean     | `false`              | ✅    |

| `defaultOpenIndex`              | Integer     | `undefined`              | ✅    |

| `defaultAllOpen`              | Boolean     | `false`              | ✅    |

| `rootClass`              | String     | `undefined`              | ✅    |

| `cardClass`              | String     | `undefined`              | ✅    |

| `headerClass`              | String     | `undefined`              | ✅    |

| `footerClass`              | String     | `undefined`              | ✅    |

## Usage with Props

```jsx

import React from 'react'

import { Accordion } from 'reactjs-custom-accordion'

import {FaBed} from "react-icons/fa"

import sampleData from '../../Data' 

function Demo() {

    return (

        <>

            

        >

    )

}

export default Demo

```

_Checkout Example App in [`/example`](https://github.com/theinfosecguy/reactjs-custom-accordion/tree/main/example) Directory_

## License

MIT © [theinfosecguy](https://github.com/theinfosecguy)