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 } | options[0] | | | 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 | | |