custom-accordian v1.0.1

Custom Accordian

create a accordian on the go by just passing JSON

Installation

npm i custom-accordian

Then ...

const data = {
  Header1: {
    accordianContent: [
      {
        title: "Header1 Content 1",
      },
    ],
  },
  Header2: {
    accordianContent: [
      {
        title: "Haeder2 Content 1",
      },
      {
        title: "Haeder2 Content 2",
      },
    ],
  },
};

import {  CustomAccordian } from "custom-accordian";

<CustomAccordian
    data={data}
    bgColor="#333333"
    headerBgColor="lightblue"
    fontSize="15px"
    lineColor="blue"
    color="yellow"
    headerHeight="28px"
/>

Nested Accordian

const nested_data = {
  Header1: {
    accordianContent: [
      {
        title: "Header1 Content 1",
      },
      {
        title: "Header1 content 2",
        isChildren: true,
        children: {
          child1: {
            accordianContent: [
              {
                title: "child 1 content 1",
              },
              {
                title: "child 1 content 2",
              },
              {
                title: "child 1 content 3",
              },
            ],
          },
          child2: {
            accordianContent: [
              {
                title: "child 2 content 1",
              },
            ],
          },
        },
      },
      {
        title: "Header1 content 3",
      },
    ],
  },
  Header2: {
    accordianContent: [
      {
        title: "Haeder2 Content 1",
        component: <div>Component</div>,
      },
      {
        title: "Haeder2 Content 2",
      },
    ],
  },
};

import {  CustomAccordian } from "custom-accordian";

<CustomAccordian
    data={nested_data}
    bgColor="#333333"
    headerBgColor="lightblue"
    fontSize="15px"
    lineColor="blue"
    color="yellow"
    headerHeight="28px"
/>

Props options

• data - JSON
• bgColor - string
• headerBgColor - string
• fontsize - string
• fontWeight - string | number
• lineColor - string
• color - string
• headerHeight - string
• removeIcon - react componnet

• addIcon - react component