https://github.com/roginfarrer/collapsed
Headless UI for for creating flexible and accessible expand/collapse components in TS/JS.
https://github.com/roginfarrer/collapsed
animation collapse css-animations custom-hook expand react typescript
Last synced: about 1 year ago
JSON representation
Headless UI for for creating flexible and accessible expand/collapse components in TS/JS.
- Host: GitHub
- URL: https://github.com/roginfarrer/collapsed
- Owner: roginfarrer
- License: mit
- Created: 2018-10-13T01:08:26.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-23T22:33:44.000Z (over 1 year ago)
- Last Synced: 2025-05-05T16:47:32.791Z (about 1 year ago)
- Topics: animation, collapse, css-animations, custom-hook, expand, react, typescript
- Language: TypeScript
- Homepage: https://react-collapsed.netlify.app/
- Size: 2.12 MB
- Stars: 514
- Watchers: 5
- Forks: 40
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 🙈 Collapsed
![npm bundle size (version)][minzipped-badge]
[![npm version][npm-badge]][npm-version]
[](https://app.netlify.com/sites/react-collapsed/deploys)
Headless UI for building flexible and accessible animating expand/collapse sections or disclosures. Animates the height of elements to `auto`.
```bash
npm install react-collapsed
```
## [—> View installation and usage docs here! <—](/packages/react-collapsed)
### Experimental Framework Adapters
[react-collapsed][react-collapsed] is stable and ready to use. I've also been exploring a rewrite with a framework-agnostic core that's also available with a few different framework adapters (indicated with the `@collapsed/` namespace). Here's a breakdown to clarify what's available and their stability:
| Package | Stable |
| ---------------------------------- | ------ |
| [react-collapsed][react-collapsed] | ✅ |
| [@collapsed/core](packages/core) | 🚧 |
| [@collapsed/react](packages/react) | 🚧 |
| [@collapsed/solid](packages/solid) | 🚧 |
| [@collapsed/lit](packages/lit) | 🚧 |
[react-collapsed]: /packages/react-collapsed
[minzipped-badge]: https://img.shields.io/bundlephobia/minzip/react-collapsed/latest
[npm-badge]: http://img.shields.io/npm/v/react-collapsed.svg?style=flat
[npm-version]: https://npmjs.org/package/react-collapsed "View this project on npm"
[netlify]: https://app.netlify.com/sites/react-collapsed/deploys
[netlify-badge]: https://api.netlify.com/api/v1/badges/4d285ffc-aa4f-4d32-8549-eb58e00dd2d1/deploy-status