# 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<sup style="color: red">*</sup> | 'image' \|'initial' | 'initial' |        The type of avatar        |

## Button

### Usage

### Props

| Name                                    |        Type         | Default |       Description       |
| --------------------------------------- | :-----------------: | ------- | :---------------------: |
| children<sup style="color: red">*</sup> | 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<sup style="color: red">*</sup> | 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<sup style="color: red">*</sup> |                        ReactNode \| string                        |          | The children for Menu Button component |
| menuItems<sup style="color: red">*</sup>  | Array\<{children: ReactNode \| string, clickHandler: function}\>  |          |  Array of items constituting the menu  |
| horizontal<sup style="color: red">*</sup> |                  'left' \| 'center'\|   'right'                   | 'left'   |      Horizontal position for menu      |
| vertical<sup style="color: red">*</sup>   |                   '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<sup style="color: red">*</sup> |                            (page: number) => void                            |         |   Function to update current page   |
| classes                                   | { root?: string, arrowButton?: string, pageButton?: string, dots?: string  } |         | Class map for Pagination components |

| currentPage<sup style="color: red">*</sup> |         number         |         |                          Active page number                           |
| pageCount<sup style="color: red">*</sup>   |         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<sup style="color: red">*</sup> |        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<sup style="color: red">*</sup> |                      Array\<{title: string, selector: string}\>                       |         | Data displayed on table header |
| rows<sup style="color: red">*</sup>   |                                     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<sup style="color: red">*</sup> | 'top' \| 'right' \| 'bottom' \| 'left' | 'top'   |                                        |
| title<sup style="color: red">*</sup>     |                 string                 |         |                                        |