@atul15r/react-collapsible

React Collapsible

React-Collapsible is an animated collapsible/expandable component which is designed for react app.

Live Demo

Installation

 # If you use npm:
 npm i @atul15r/react-collapsible

 # If you use yarn:
 yarn add @atul15r/react-collapsible


 ES6 Usage
 import { Collapsible } from '@atul15r/react-collapsible';

 Commonjs Usage
 var Collapsible = require('@atul15r/react-collapsible');

Quick Start

<Collapsible items={items} />

Usage With Custom Styles

icon component can be HTMLElement (i.e. svg/image/div/section ...etc)/React-Component

import React from 'react';
import { Collapsible } from '@atul15r/react-collapsible';

const items = [
  {
    key: 1,
    title: "Gain The Competitive Advantage",
    content:
      "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."
  },
  {
    key: 2,
    title: "Learn The Ins & Outs Of Microservices",
    content:
      "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."
  },
];


const App = () => {
  return (
   <Collapsible
 items={items}
 itemTitleStyle={{
         background: `repeating-radial-gradient(
         circle,
         purple,
         purple 10px,
         #4b026f 10px,
         #4b026f 20px
  )`,
  font-weight: 500,
  color: "#fff"
 }}
 iconActiveColor="#fff"
 iconInActiveColor="#fff"
/>
  );
};

export default App;

Props

name	type	required	default	description
items	array	true	[]	it takes an array of object { key: number title: ReactNode content: string | ReactNode }[]
wrapperClassName	string	false	undefined	add any custom class you want
wrapperStyle	object	false	undefined	wrapperStyle= {{ background:"#ccc", color:"#999", ...etc }}
itemClassName	string	false	undefined	add any custom class you want
itemStyle	object	false	undefined	itemStyle= {{ padding:4, }}
itemTitleClassName	string	false	undefined	add any custom class you want eg: "text-lg italic" ...etc
itemTitleStyle	object	false	undefined	itemTitleStyle= {{ fontSize:12 }}
itemContentClassName	string	false	undefined	add any custom class you want eg: "p-4 mx-3" ...etc
itemContentStyle	object	false	undefined	itemContentStyle= {{ padding:"4px 12px", background:"#fefefe" }}
icon	func	false	undefined	<Collapsible icon={(isOpen:boolean) => <IconComponent isOpen={isOpen}/>} />
iconStyle	object	false	undefined	iconStyle= {{ activeColor:"#fff", inactiveColor: "#fff", width: 20, height: 20 }}