reuse-components

A clean, reusable React UI component library for consistent enterprise and product interfaces.

✅ Designed for reusability and consistency across projects

✅ Focus on composable, minimal, and flexible APIs

✅ ActionView

✅ More coming

Installation

npm install reuse-components

Components

Reusable, common UI components such as ActionView, ConfirmButton, and EditableText will be incrementally added for building consistent product UIs efficiently.

ActionView Example

Features

• Reusable action handling: Synchronous or asynchronous onClick handlers supported.
• Layout flexibility: Control direction ("vertical" | "horizontal").
• Overflow handling: maxVisible prop controls how many actions are shown before the rest overflow into a dropdown.

Usage

Define your actions outside the React component and pass them to ActionView for consistent handling:

import { ActionView } from "reuse-components";
import type { ClickAction } from "reuse-components";

const actions: ClickAction[] = [
  {
    label: "Edit",
    onClick: async () => {
      console.log("Edit clicked");
      await new Promise((res) => setTimeout(res, 500));
    },
    type: "primary",
  },
  {
    label: "Delete",
    onClick: () => {
      console.log("Delete clicked");
    },
    danger: true,
  },
];

function Example() {
  return (
    <ActionView
      actions={actions}
      maxVisible={2} // Only 2 buttons shown before overflow
      direction="vertical" // or "horizontal"
    />
  );
}

Roadmap

• [ ] Add SearchableTable for common searchable table.

License

MIT

Why reuse-components?

• Saves time: Eliminate repeated implementation of common UI patterns.
• Ensures consistency: Same design and behavior across products and teams.
• Composable & lightweight: Add only what you need.
• Future-friendly: Ready for theming, design system expansion, and potential AI-driven UI composition later.