Anshu React UI Library

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

---

Installation

bash

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

tsx

import { SearchBox } from "anshu-reactui";



function App() {

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



  return (

          value={search}

      onChange={setSearch}

      placeholder="Search..."

      Theme="#333"

      iconSize={20}

      onclick={() => console.log("Input clicked")}

    />

  );

}





---



Utilities



$3



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.

ts

import { configureCrypto } from "anshu-reactui";



configureCrypto({

  defaultKey: "MySecretKey123",

  secretSuffix: "MySuffix",

});





#### 2.

encryptDefault(text: string): string





Encrypt a string using the default key.

ts

import { encryptDefault } from "anshu-reactui";



const encrypted = encryptDefault("Hello World");





#### 3.

decryptDefault(encryptedText: string): string





Decrypt a string using the default key.

ts

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.

ts

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

ts

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.



$3

- Customizable placeholder text

- Callback for search input changes

- Optional debounce for efficient searching

- Supports keyboard navigation



$3

$3



Display contextual feedback messages.

tsx

import { Alert } from "anshu-reactui";



;





$3



Show user profile images or initials.

tsx

import { Avatar } from "anshu-reactui";



;





$3



Add count or status indicators.

tsx

import { Badge } from "anshu-reactui";



Inbox;





$3



Container for content with shadow and padding.

tsx

import { Card } from "anshu-reactui";



User details here;





$3



Tabbed card layout.

tsx

import { TabCard } from "anshu-reactui";



 }]} />;





$3



Customizable button component.

tsx

import { Button } from "anshu-reactui";



;





$3



Dropdown select input.

tsx

import { SelectBox } from "anshu-reactui";



 {}} />;





$3



Show loading indicators.

tsx

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



;

;





$3



Navigation menus.

tsx

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



;

;





$3



Show progress status.

tsx

import { ProgressBar } from "anshu-reactui";



;





$3



Show toast notifications.

tsx

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



toast.success("Saved!");

;





$3



Toggle switch input.

tsx

import { Switch } from "anshu-reactui";



 {}} />;





$3



Show tooltip on hover.

tsx

import { Tooltip } from "anshu-reactui";



Hover me;





$3



Show navigation path.

tsx

import { Breadcrumb } from "anshu-reactui";



;





$3



Slide-in panel.

tsx

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



// Usage in component

Panel Content;





$3



Stacked modal dialogs.

tsx

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



;





$3



Display tabular data with pagination.

tsx

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



;

;





$3



Cookie, color, export, image helpers.

tsx

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





$3



Detect outside click, window size.

tsx

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





$3



TypeScript types for menus, breadcrumbs, tables.

tsx

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

anshu-reactui

Anshu React UI Library

Installation

or

Components

Utilities

$3

Export Structure

Contributing

License

Documentation for SearchBox Component

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

`Documentation for` SearchBox `Component`