Collapsible Ang

A simple and customizable collapsible (accordion) component for React applications.

Versions

• V0.0.1 - Initial release
• V0.0.2 - Simplified version (removed links from items)

Installation

npm install collapsible-ang

or

yarn add collapsible-ang

Usage

Here's a basic example of how to use the Collapsible component:

import React from "react";
import CollapsibleAngi from "collapsible-ang";

// Import the CSS for the collapsible component
import "collapsible-ang/dist/style.css";

const App = () => {
  const items = [
    {
      title: "Collapsible",
      content:
        "Lorem ipsum dolor sit amet, consectetur adip representations in facilisis in facilisis at sapien ",
    },
    {
      title: "Collapsible 2",
      content:
        "Lorem ipsum dolor sit amet, consectetur adip representations in facilisis in facilisis at sapien ",
    },
    {
      title: "Collapsible 3",
      content:
        "Lorem ipsum dolor sit amet, consectetur adip representations in facilisis in facilisis at sapien ",
    },
  ];

  return (
    <div className="container mx-auto p-4">
      <CollapsibleAngi items={items} />
    </div>
  );
};

export default App;

Props

The Collapsible component accepts the following props:

| Prop | Type | Description | | ----- | ---------------------- | ------------------------------------------------------ | | items | Array | An array of objects representing the collapsible items |

Where CollapsibleItem is:

type CollapsibleItem = {
  title: string;
  content: string;
};

Styling

This component comes with its own CSS file for styling. Add the following import statement in your main layout or App component:

import "collapsible-ang/dist/style.css";

Development

To start developing the component:

1. Clone the repository
2. Install dependencies with npm install or yarn install
3. Import the collapsible CSS into your project. In your project's main layout or App component, add:

   import "collapsible-ang/dist/style.css";

   This step is crucial for the proper styling and functionality of the collapsible component.
4. Start the development server with npm run dev or yarn dev

License

This project is licensed under the MIT License.