Animated, lightweight expandable components for React
Tags: toggle
Published: 2023-10-28 15:10:55

---
title: Animated, lightweight expandable components for React
published: true
date: 2023-10-28 00:17:00 UTC
tags: Toggle
canonical_url: https://reactjsexample.com/animated-lightweight-expandable-components-for-react/
---

# React Expandify 🚀

> ![Animated, lightweight expandable components for React](https://reactjsexample.com/content/images/2023/10/Code_2023-10_11-12-35.jpg)
> 
> **Animated, lightweight expandable components for React. No extras, just effortless expand and collapse.**

## 📸 Demo

![Animated, lightweight expandable components for React](https://camo.githubusercontent.com/aafe1a0ec1af9757d60fa60dba42a14dc356f49f56ed8c992f5d8779a6a9a31e/68747470733a2f2f6763646e622e706272642e636f2f696d616765732f58737448573156303643697a2e6769663f6f3d31)

* * *

## 🚀 Features

- 🎛 **Plug and Play** : Get started instantly, no complicated setup!
- 🌈 **Elemental Freedom** : Use any HTML element as your expandable container.
- 🎨 **Your Style, Your Rules** : Easy-to-add custom classes.
- ⏱ **Tick Tock Goes The Clock** : Control the expand and collapse speed to the millisecond!

* * *

## 📦 Installation

Add `React Expandify` to your project with npm:

```
npm install react-expandify
```

Or use yarn:

```
yarn add react-expandify
```

* * *

## 💡 Usage

Basic example:

```
import { Expandable } from 'react-expandify';
import 'react-expandify/dist/style.css';

const MyApp = () => (
  <Expandable expanded>
    <p>Your awesome content here!</p>
  </Expandable>
);
```

* * *

## 📚 Documentation

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `expanded` | `boolean` | `false` | Determines whether the content is expanded or not. |
| `children` | `ReactNode` | – | Children to be rendered inside the component. |
| `elementType` | `JSX.IntrinsicElements` | `'div'` | The HTML element type for the Expandable component. |
| `expandDuration` | `number` | `300` | Duration for the expand animation in milliseconds. |
| `collapseDuration` | `number` | `300` | Duration for the collapse animation in milliseconds. |
| `easing` | `string` | `ease-in-out` | Easing function for the expand and collapse animations. |
| `className` | `string` | – | Additional className for the Expandable component. |
| `onCollapse` | `() => void` | – | Callback when the content has collapsed. |
| `onExpand` | `() => void` | – | Callback when the content has expanded. |

* * *

## ✨ What You Can Create

| 
#### Tree view

![Animated, lightweight expandable components for React](https://camo.githubusercontent.com/aafe1a0ec1af9757d60fa60dba42a14dc356f49f56ed8c992f5d8779a6a9a31e/68747470733a2f2f6763646e622e706272642e636f2f696d616765732f58737448573156303643697a2e6769663f6f3d31)

 | 
#### Accordion component

![Animated, lightweight expandable components for React](https://camo.githubusercontent.com/ad57518505506a7c6a9899ff0ef990414e3b5f024bb5a77b6d10048b5db4aca6/68747470733a2f2f6763646e622e706272642e636f2f696d616765732f4c5142696d746b35484870482e6769663f6f3d31)

 |
| 
#### Toggles

![Animated, lightweight expandable components for React](https://camo.githubusercontent.com/991e615a4bd2643935d6347c696bd9ab783c424c5a4f25f6f01f244a6dcbb686/68747470733a2f2f6763646e622e706272642e636f2f696d616765732f46694b686363766b653447432e6769663f6f3d31)

 | 
#### More examples coming soon…
 |

* * *

## 🙏 Contributing

Got ideas or bug reports? Open an issue or send a pull request!

## 📄 License

Licensed under the MIT License. See [LICENSE](https://github.com/armennersisyan/ReactExpandify/blob/main/LICENSE) for more details.

* * *

Crafted with 💖 by [Armen Nersisyan](https://github.com/armennersisyan)

## GitHub

[View Github](https://github.com/armennersisyan/ReactExpandify?ref=reactjsexample.com)