@atul15r/react-collapsible v0.1.7

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