1.0.11 • Published 2 years ago
React Components
A React component library for faster development
The available components are :
1. Avatar
2. Button
3. Chip
4. Loader
5. Menu
6. Pagination
7. Progress Bar
8. Select
9. Snackbar
10. Stack
11. Table
12. Tooltip
Avatar
Usage
Props
| Name | Type | Default | Description |
|---|
| imgSrc | string | | The src for image avatar |
| initialLength | number (1 | 2) | 1 | The length of initials on avatar |
| name | string | | The name of the person |
| size | number | 56 | The size of avatar in px |
| variant* | 'image' |'initial' | 'initial' | The type of avatar |
Button
Usage
Props
| Name | Type | Default | Description |
|---|
| variant | 'icon' | | For icon button |
Chip
Usage
Props
| Name | Type | Default | Description |
|---|
| label* | string | | |
| onDelete* | function | | Callback fired when clicked on delete icon |
Loader
Usage
Props
| Name | Type | Default | Description |
|---|
| background | string | | |
| color | string | | |
| loading* | boolean | | Determines loader visibility |
| size | number | | Size in pixels |
Menu
Usage
Props
| Name | Type | Default | Description |
|---|
| classes | { menu?: string button?: string list?: string item?: string } | | Class map for menu components |
| menuButton* | ReactNode | | The children for Menu Button component |
| menuItems* | Array\<{children: ReactNode | string, clickHandler: function}> | | Array of items constituting the menu |
| horizontal* | 'left' | 'center'| 'right' | 'left' | Horizontal position for menu |
| vertical* | 'bottom' | 'center' | 'top' | 'bottom' | Vertical position for menu |
| horizontalOffset | number | | Horizontal offset in px |
| verticalOffset | number | | Vertical offset in px |
Pagination
Usage
Props
| Name | Type | Default | Description |
|---|
| changePage* | (page: number) => void | | Function to update current page |
| classes | { root?: string, arrowButton?: string, pageButton?: string, dots?: string } | | Class map for Pagination components |
| currentPage* | number | | Active page number |
| pageCount* | number | | Total number of pages |
| siblingCount | number | 1 | Minimum number of page buttons show on either side of the active page |
Progress Bar
Usage
Props
| Name | Type | Default | Description |
|---|
| classes | {root?: string, bar?: string } | | |
| progress* | number | | Number between 0 and 100 |
Select
Usage
Props
| Name | Type | Default | Description |
|---|
| classes | {root?: string, label?: string, optionsList?: string, option?: string } | | |
| defaultOption | { label: string, value: string } | options0 | |
| options* | Array<{ label: string, value: string }> | | |
Snackbar
Usage
Props
| Name | Type | Default | Description |
|---|
| duration | number | 3000 | Number of milliseconds snackbar appears on screen |
| imgSrc | string | | The src for icon |
| label* | string | | Label on the snackbar |
| variant | 'success' | 'error' | 'error' | |
Stack
Usage
Props
| Name | Type | Default | Description |
|---|
| children | ReactNode | | |
| direction | 'row' | 'column' | 'row' | |
| columnSpacing | number | 1 | Space between columns in rem |
| rowSpacing | number | 1 | Space between rows in rem |
| wrap | boolean | false | |
Table
Usage
Props
| Name | Type | Default | Description |
|---|
| classes | { table?: string header?: string headerCell?: string row?: string cell?: string } | | Class map for table components |
| header* | Array\<{title: string, selector: string}> | | Data displayed on table header |
| rows* | Array\<{ }> | | Data displayed on table body |
Tooltip
Usage
Props
| Name | Type | Default | Description |
|---|
| background | string | | |
| children | ReactNode | | |
| classes | {wrapper?: string, text?: string} | | Class map for tooltip wrapper and text |
| color | string | | |
| direction* | 'top' | 'right' | 'bottom' | 'left' | 'top' | |
| title* | string | | |