Anshu React UI Library

A reusable React component library with utility functions for encryption and UI components. Built with TypeScript and Vite.

Installation

npm install anshu-reactui
# or
yarn add anshu-reactui

Components

A customizable search input with clear button and icon support.

Props

| Prop | Type | Default | Description | | ------------- | ------------------------- | ------------- | ---------------------------------- | | value | string | | Input value | | onChange | (value: string) => void | | Function triggered on input change | | placeholder | string | "Search..." | Placeholder text | | style | React.CSSProperties | {} | Custom styles | | className | string | "" | Additional CSS classes | | Theme | string | | Color theme for icons | | iconSize | number | 16 | Size of the icon | | onClick | () => void | | Function triggered on input click |

Usage

import { SearchBox } from "anshu-reactui";

function App() {
  const [search, setSearch] = useState("");

  return (
    <SearchBox
      value={search}
      onChange={setSearch}
      placeholder="Search..."
      Theme="#333"
      iconSize={20}
      onclick={() => console.log("Input clicked")}
    />
  );
}

Utilities

Crypto Functions

All crypto utilities use AES encryption with a default fixed IV. Users can configure secret key and suffix.

1. configureCrypto

Configure default keys and suffix globally.

import { configureCrypto } from "anshu-reactui";

configureCrypto({
  defaultKey: "MySecretKey123",
  secretSuffix: "MySuffix",
});

2. encryptDefault(text: string): string

Encrypt a string using the default key.

import { encryptDefault } from "anshu-reactui";

const encrypted = encryptDefault("Hello World");

3. decryptDefault(encryptedText: string): string

Decrypt a string using the default key.

import { decryptDefault } from "anshu-reactui";

const decrypted = decryptDefault(encrypted);

4. passwordEncryptDecrypt(text: string, eType: "E" | "D", password?: string): string

Encrypt or decrypt using a custom password. If password is not provided, default key is used.

import { passwordEncryptDecrypt } from "anshu-reactui";

// Encrypt with custom password
const encrypted = passwordEncryptDecrypt("Hello World", "E", "MyPassword123");

// Decrypt
const decrypted = passwordEncryptDecrypt(encrypted, "D", "MyPassword123");

Export Structure

import {
  SearchBox,
  configureCrypto,
  encryptDefault,
  decryptDefault,
  passwordEncryptDecrypt
} from "anshu-reactui";

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to your branch
5. Create a pull request

License

MIT License

Documentation for SearchBox Component

The SearchBox component provides a user interface element for searching within your application. It is designed to be flexible and easy to integrate into any React project.

Features

• Customizable placeholder text
• Callback for search input changes
• Optional debounce for efficient searching
• Supports keyboard navigation

Example Usage

2. Alert

Display contextual feedback messages.

import { Alert } from "anshu-reactui";

<Alert type="success" message="Operation successful!" />;

3. Avatar

Show user profile images or initials.

import { Avatar } from "anshu-reactui";

<Avatar src="user.jpg" alt="User" size={40} />;

4. Badge

Add count or status indicators.

import { Badge } from "anshu-reactui";

<Badge count={5}>Inbox</Badge>;

5. Card

Container for content with shadow and padding.

import { Card } from "anshu-reactui";

<Card title="Profile">User details here</Card>;

6. TabCard

Tabbed card layout.

import { TabCard } from "anshu-reactui";

<TabCard tabs={[{ label: "Tab1", content: <div /> }]} />;

7. Button

Customizable button component.

import { Button } from "anshu-reactui";

<Button onClick={() => alert("Clicked!")}>Click Me</Button>;

8. SelectBox

Dropdown select input.

import { SelectBox } from "anshu-reactui";

<SelectBox options={["One", "Two"]} onChange={v => {}} />;

9. Loading & Spinner

Show loading indicators.

import { Loading, Spinner } from "anshu-reactui";

<Loading />;
<Spinner />;

10. HorizontalBarMenu & SidebarMenu

Navigation menus.

import { HorizontalBarMenu, SidebarMenu } from "anshu-reactui";

<HorizontalBarMenu items={menuItems} />;
<SidebarMenu items={menuItems} />;

11. ProgressBar

Show progress status.

import { ProgressBar } from "anshu-reactui";

<ProgressBar value={60} />;

12. ToastContainer & toast

Show toast notifications.

import { ToastContainer, toast } from "anshu-reactui";

toast.success("Saved!");
<ToastContainer />;

13. Switch

Toggle switch input.

import { Switch } from "anshu-reactui";

<Switch checked={true} onChange={v => {}} />;

14. Tooltip

Show tooltip on hover.

import { Tooltip } from "anshu-reactui";

<Tooltip text="Info">Hover me</Tooltip>;

15. Breadcrumb

Show navigation path.

import { Breadcrumb } from "anshu-reactui";

<Breadcrumb items={[{ label: "Home", href: "/" }]} />;

16. OffCanvace

Slide-in panel.

import { OffCanvace, openOffCanvace, closeOffCanvace } from "anshu-reactui";

// Usage in component
<OffCanvace visible={true}>Panel Content</OffCanvace>;

17. ModalStack & ModalStackManager

Stacked modal dialogs.

import { ModalStack, ModalStackManager } from "anshu-reactui";

<ModalStack />;

18. DataTable & Pagination

Display tabular data with pagination.

import { DataTable, Pagination } from "anshu-reactui";

<DataTable columns={columns} data={data} />;
<Pagination total={100} pageSize={10} />;

19. Utility Services

Cookie, color, export, image helpers.

import { getCookie, hexToRgba, printJson, exportToCSV, looksLikeImage } from "anshu-reactui";

20. Hooks

Detect outside click, window size.

import { useOutsideClick, useWindowSize } from "anshu-reactui";

21. Data Types

TypeScript types for menus, breadcrumbs, tables.

import type { MenuNode, BreadcrumbItem, CategoryNode, ModalItem, Column } from "anshu-reactui";