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 | | |