React Expandify 🚀

Animated, lightweight expandable components for React. No extras, just effortless expand and collapse.

📸 Demo

🚀 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

Accordion component

Toggles

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 for more details.

Crafted with 💖 by Armen Nersisyan

GitHub

View Github