Overflwn - React Overflow Container

A lightweight React library featuring the OverflowContainer component that intelligently handles overflow content with a customizable "more" indicator.

Live demo: https://insiderto.github.io/overflwn

🌟 Features

• Automatically handles overflowed content
• Supports tags, menus, numbers, and more
• Custom render for hidden elements
• Zero dependencies beyond React
• TypeScript support

🚀 Installation

npm install overflwn
# or
yarn add overflwn

🛠️ Usage Example

// Import the OverflowContainer component
import { OverflowContainer } from "overflwn";

const tags = [
  "#react", "#typescript", "#opensource", "#webdev", "#saas",
  "#uiux", "#css", "#frontend", "#demo", "#overflow"
];

export default function Demo() {
  return (
    <div style={{ maxWidth: 400 }}>
      <OverflowContainer
        renderHiddenElements={hidden => (
          <div style={{ color: '#888', fontStyle: 'italic' }}>
            +{hidden.length} more
          </div>
        )}
      >
        {tags.map(tag => (
          <span
            key={tag}
            style={{
              padding: '0.2em 0.7em',
              margin: '0 0.3em 0.3em 0',
              background: '#eee',
              borderRadius: '999px',
              display: 'inline-block',
              fontSize: '0.95em',
            }}
          >
            {tag}
          </span>
        ))}
      </OverflowContainer>
    </div>
  );
}

🧩 Customization

• Pass renderHiddenElements to customize the hidden items indicator.
• Style children as you wish.

📄 License

Overflwn is licensed under the MIT License.