1.0.0 • Published 3 years ago
Share package React Components A React component library for faster development
The available components are :
1. Avatar
2. Button
3. Loader
4. Menu
5. Pagination
6. Snackbar
7. Stack
8. Table
9. 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 children* ReactNode | string clickHandler function Callback fired on click disabled boolean false variant 'icon' For icon button
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 | string 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 |
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