This Package contains below React UI Components available to use

• Multi Select Dropdown
• Currency Formatter
• Search Input
• Pagination

💥 Working Demo - Stackblitz

Documentation is still incomplete, will try to update asap. PR's for New Components are Welcome

Install

npm install --save @erpardeepjain/rc-pui

Usage

Pagination

| Name | Description
| ----------- | -----------
| pageCount | number | itemCount | number
| currentPage | number
| onPageChange | function
| showLabel | boolean
| showStartEndPage | boolean

import { Pagination } from '@erpardeepjain/rc-pui';
...
const {pageCount, itemCount, currentPage, onPageChange, showLabel, showStartEndPage } = paginationConfig;
...
<Pagination paginationConfig={paginationConfig} />

Currency Formatter

props

| Name | Description | Default | ----------- | ----------- | ----------- | value | integer | N/A | prefix | string | N/A | zeroAllowed | boolean | true | noSpan | boolean | N/A | onlyComma | boolean | N/A | eleClass | string | N/A

import { CurrencyFormat } from '@erpardeepjain/rc-pui';
...
<CurrencyFormat prefix="$" value="123456789" zeroAllowed />

Search Input

| Name | Description | Default | ----------- | ----------- | ----------- | placeholder | string | Search | waitTime | intiger | 500 | minSearchChar | intiger | 2 | onChange | function | function

import { SearchInput } from '@erpardeepjain/rc-pui';
...
const onSearchCB = (searchedValue) => {
    console.log(searchedValue);
};
...
<SearchInput onChange={onSearchCB} placeholder="Search Record" waitTime={300} minSearchChar={2} />

Multi Select Dropdown

| Name | Description | Default | -------- | ----------- | ----------- | name | string | N/A | label | string | Select Multiple | options | array | [] | selectAll | boolean | false | onSelect | function | function

import { MultiSelect } from '@erpardeepjain/rc-pui';
...
const handleFilter = (selectedItems) => {
    console.log(selectedItems);
};
...
<MultiSelect 
    title="Status"
    options={['completed', 'failed', 'processing']} 
    name="status"
    selectAll="true"
    onSelect={handleFilter}
/>