https://github.com/roginfarrer/collapsed

Headless UI for for creating flexible and accessible expand/collapse components in TS/JS. Includes adapter for React.
https://github.com/roginfarrer/collapsed

animation collapse css-animations custom-hook expand react typescript

Last synced: 3 months ago
JSON representation

Headless UI for for creating flexible and accessible expand/collapse components in TS/JS. Includes adapter for React.

• Host: GitHub
• URL: https://github.com/roginfarrer/collapsed
• Owner: roginfarrer
• License: mit
• Created: 2018-10-13T01:08:26.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2024-04-16T17:27:28.000Z (7 months ago)
• Last Synced: 2024-05-22T03:03:24.773Z (6 months ago)
• Topics: animation, collapse, css-animations, custom-hook, expand, react, typescript
• Language: TypeScript
• Homepage: https://react-collapsed.netlify.app/
• Size: 1.94 MB
• Stars: 504
• Watchers: 5
• Forks: 41
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🙈 Collapsed

![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/roginfarrer/collapsed/main.yml)

![npm bundle size (version)][minzipped-badge]

[![npm version][npm-badge]][npm-version]

[![Netlify Status](https://api.netlify.com/api/v1/badges/5a5b0e80-d15e-4983-976d-37fe6bdada7a/deploy-status)](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