Overflowed

Warning This project is a WIP and not yet suitable for production use.

Tiny library for sites by preventing items from wrapping. Instead, an overflow item is displayed to interact with these now hidden items. This can be useful in navigation bars, toolbars, and item collections to maintain a clean and visually appealing layout.

• ⚛️ Works across all major frameworks
• 🌳 Lightweight and dependency-free, tree-shakable
• 🏗️ Includes strongly typed TypeScript declarations
• 🎨 Infinitely customizable, sensible defaults
• ⚡ Highly optimized and performant
• 📚 Clean API and comprehensive documentation
• ♿ Encourages accessible practices
• ↩️ Supports right-to-left writing modes
• ⚙️ Supports server-side and client-side rendering
• 🧩 Ships with ESM and CJS bundles

Installation

npm install overflowed
yarn add overflowed
pnpm add overflowed

Progress

• overflowed/core
• overflowed/react
  • useOverflowedItems
• overflowed/svelte
  • overflowedItems
• Documentation
  • Getting started
    • React
    • Svelte
  • Examples

Future

• overflowed/vue
• overflowed/preact
• overflowed/solid
• Playground

Usage

Check out the examples to see the library being used in various scenarios and it's implementations.