This Package contains below React UI Components available to use
- Multi Select Dropdown
- Currency Formatter
- Search Input
- Pagination
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}
/>