react-accordian

v1.0.16

Published

2 years ago

Full customized accordion

Downloads

0High
0Medium
0Low

arslanahmed95

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

Demo

For customization For viewing

Hi, I'm Arslan Ahmed Shaad! 👋

🚀 About Me

I'm a full stack developer...

Feedback

If you have any feedback, please reach out to us at [email protected]

Authors

@Arslan Ahmed