React-accordian NPM

React Accordion

Fully customizable,

Installation

Install react-accordian with npm

  npm install react-accordian

Usage/Examples

using functional component

import React, { useState } from 'react'
import Accordion from 'react-accordian'

const Html = () => {
  return (
    <h4>
      Stick a thermometer into the bowl of ice and wait for the temperature of
      the ice water in the bowl to drop to 17º-20º F. Gently pull one of the
      bottles out of the bowl and pour it into a clear glass cup or jar. Grab an
      ice cube and place it in the glass of very cold water to watch the water
      instantly freeze into ice!
    </h4>
  )
}

function App() {
  const [clicked, setClicked] = useState('0')
  const handleToggle = (index) => {
    if (clicked === index) return setClicked('0')
    setClicked(index)
  }
  return (
    <>
      <Accordion
        active={clicked === 0}
        onToggle={() => handleToggle(0)}
        header="How to purify water"
      >
        <h4>
          Boiling water is the cheapest and safest method of water purification.{' '}
        </h4>
      </Accordion>
      <Accordion
        active={clicked === 0}
        onToggle={() => handleToggle(0)}
        header="What is the quickest way to freeze water?"
      >
        <Html />
      </Accordion>
    </>
  )
}

Properties

Property	type	Default	Description
active	bolean	false	if true accordion will open
onToggle	function		it is a callback function by using this function you can change the active prop. in the above usage setion I already used onToggle function to change the clicked state and passing this state in active prop
gap	string	"0px"	by giving gap prop margin-bottom will be applied to that accordion
styling	object	{}	you can give your custom styling to accordion. this styling is applied when accordion is not in active state, means if active prop is false then this styling is applied to the accordion
activeStyling	object	{backgroundColor: "#105057", color: "white" }	you can give your custom styling to active accordion, means this styling is applied when active is true
header	string	""	this prop is used to show the title of accordion
activeIcon	string, component, jsx	"—"	when active = true this prop is applied
notActiveIcon	string, component, jsx	"+"	when active = false this prop is applied
activeIconStyling	object	{ fontSize: "10px" }	when active = true this prop is applied, this prop is used to change the styling of activeIcon
notActiveIconStyling	object	{ fontSize: "10px" }	when active = false this prop is applied, this prop is used to change the styling of notActiveIcon

Using All properties

import React, { useState } from 'react'
import Accordion from 'react-accordian'

import { FaAngleDoubleDown, FaAngleDoubleRight } from 'react-icons/fa'
export const Html1 = () => {
  return (
    <>
      <div style={{ border: '1px solid red', padding: '8px' }}>
        <h4>
          Boiling water is the cheapest and safest method of water purification.
          Water sources and or channels of distribution may render your water
          unsafe. For example, parasites and germs are things you may not see by
          bare eyes, but their effects can be life threatening.
        </h4>
      </div>
    </>
  )
}
const mystyle = {
  padding: '6px',
  background: '#ba80cd',
  borderRadius: '7px',
  padding: '10px',
  color: '#fff',
}
const myActiveStyle = {
  padding: '6px',
  background: '#a539c9',
  borderRadius: '7px',
  padding: '10px',
  color: '#fff',
}

const myActiveIconStyle = {
  color: 'red',
  fontSize: '20px',
}
const mynotActiveIconStyle = {
  color: 'red',
  fontSize: '20px',
}
const AccordionPage = () => {
  const [clicked, setClicked] = useState('0')

  const handleToggle = (index) => {
    if (clicked === index) return setClicked('0')
    setClicked(index)
  }

  return (
    <div style={{ padding: '20px' }}>
      <Accordion
        gap="8px"
        styling={mystyle}
        activeStyling={myActiveStyle}
        onToggle={() => handleToggle(0)}
        active={clicked === 0}
        header="How to purify water"
        activeIcon={<FaAngleDoubleDown />}
        notActiveIcon={<FaAngleDoubleRight />}
        activeIconStyling={myActiveIconStyle}
        notActiveIconStyling={mynotActiveIconStyle}
      >
        <Html1 />
      </Accordion>

      <Accordion
        gap="8px"
        styling={mystyle}
        activeStyling={myActiveStyle}
        onToggle={() => handleToggle(1)}
        active={clicked === 1}
        header="What is the quickest way to freeze water?"
        activeIcon={<FaAngleDoubleDown />}
        notActiveIcon={<FaAngleDoubleRight />}
        activeIconStyling={myActiveIconStyle}
        notActiveIconStyling={mynotActiveIconStyle}
      >
        <h4>
          Stick a thermometer into the bowl of ice and wait for the temperature
          of the ice water in the bowl to drop to 17º-20º F. Gently pull one of
          the bottles out of the bowl and pour it into a clear glass cup or jar.
          Grab an ice cube and place it in the glass of very cold water to watch
          the water instantly freeze into ice!
        </h4>
      </Accordion>
    </div>
  )
}

export default AccordionPage