@amit_g0swami/react-ui-library

A comprehensive React components library based on Material-UI.

Table of Contents

• Installation
• Usage
• Storybook
• Components
• Hooks

Installation

npm install @amit_g0swami/react-ui-library
# or
yarn add @amit_g0swami/react-ui-library

Usage

import React from 'react';
import { YourComponent } from '@amit_g0swami/react-ui-library';

const App = () => {
  return (
    <div>
      <YourComponent />
    </div>
  );
};

export default App;

Storybook

To view and interact with the components, you can use Storybook. Run the following command:

npm run storybook
# or
yarn storybook

Visit http://localhost:6006/ in your browser to see the Storybook.

Components

| Component | Props | | -------------------- | ----- | | DefaultAlert | - severity: 'error' | 'warning' | 'info' | 'success'- variant: 'outlined' | 'filled'- color: 'error' | 'warning' | 'info' | 'success'- icon: React.ReactElement- title: string- message: string- border: string- bgColor: string | | DefaultButton | - color: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'- disable: boolean- onClick: () => void- size: 'small' | 'medium' | 'large'- type: 'button' | 'submit' | 'reset'- name: string- value: string- variant: 'text' | 'outlined' | 'contained'- className: string- styles: string- form: string- bgcolor: string | | DefaultFloatingButton | - color: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'- disable: boolean- onClick: () => void- size: 'small' | 'medium' | 'large'- type: 'button' | 'submit' | 'reset'- name: string- value: string- variant: 'text' | 'outlined' | 'contained'- className: string- styles: string- form: string- bgcolor: string | | IconLabelButton | - color: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'- disable: boolean- onClick: () => void- size: 'small' | 'medium' | 'large'- type: 'button' | 'submit' | 'reset'- name: string- value: string- variant: 'text' | 'outlined' | 'contained'- className: string- styles: string- form: string- bgcolor: string- btnText: string- startIcon: IconType- btnLabel: string | number | | TextButton | - color: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'- disable: boolean- onClick: () => void- size: 'small' | 'medium' | 'large'- type: 'button' | 'submit' | 'reset'- name: string- value: string- variant: 'text' | 'outlined' | 'contained'- className: string- styles: string- form: string- bgcolor: string- btnText: string | | DefaultIconButton | - color: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'- disable: boolean- onClick: () => void- size: 'small' | 'medium' | 'large'- type: 'button' | 'submit' | 'reset'- name: string- value: string- variant: 'text' | 'outlined' | 'contained'- className: string- styles: string- form: string- bgcolor: string- icon: IconType | | DefaultCard | - title: string- content: string- img: string- outlined: boolean- size: number | | DefaultCheck | - disabled: boolean- defaultChecked: boolean- checked: boolean- indeterminate: boolean- icon: React.ReactElement- checkedIcon: React.ReactElement- onClick: (e: any) => void- name: string- value: string | | RadioButton | - disabled: boolean- checked: boolean- defaultChecked: boolean- onClick: any- value: string- onChange: (e: any) => void | | DefaultChip | - icon: React.ReactElement- label: string- select: React.ReactElement- onClick: () => void | | DefaultInput | - type: HTMLInputTypeAttribute- placeholder: string- disabled: boolean- variant: 'standard' | 'filled' | 'outlined' | undefined- className: HTMLInputTypeAttribute- onChange: (e: { target: { value: SetStateAction } }) => void- value: string- required: boolean- minLength: number- maxLength: number- btn: boolean- name: string- width: string- label: string- labelRequired: boolean | | DefaultLink | - color: ResponsiveStyleValue<Property.Color | string[] | undefined>- underline: 'none' | 'hover' | 'always'- title: string- url: string | | CircularLoader | - color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit'- variant: 'determinate' | 'indeterminate'- value: number- buffer: number | | LinearLoader | - color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit'- variant: 'determinate' | 'indeterminate' | 'buffer' | 'query'- value: number- buffer: number | | DefaultBadge | - icon: OverridableComponent<SvgIconTypeMap<unknown, 'svg'>>- badgeContent: number- color: 'default' | 'error' | 'warning' | 'info' | 'success' | 'primary' | 'secondary'- onClick: () => void | | DefaultLabel | - labelText: string- for: string | | DefaultLogo | - srcUrl: string- altText: string- width: number- height: number | | BasicOption | - value: string- userIcon: ReactNode- upIcon: ReactNode- handleClick: () => void- width: string- data: string- border: string | | MenuOption | (Same as BasicOption) | | NotificationOption | (Same as BasicOption) | | FormInput | (Same as IInputProps defined below) | | FormOption | (Same as IFormOptionProps defined below) | | Modal | - closeModal: () => void- children: ReactNode- isModalOpen: boolean | | ToolTip | - text: string- position: 'top' | 'right' | 'bottom' | 'left'- children: React.ReactNode | | Form | (Same as IForm defined below) | | TableComponent | (Same as ITableComponentProps defined below) | | Container | - children: ReactNode- className?: string | | Tabs | - selected?: number- children: ReactNode | | Panel | - children: ReactNode- title: string |

IInputProps (Used in FormInput)

• type: HTMLInputTypeAttribute
• placeholder: string
• disabled: boolean
• variant: 'standard' | 'filled' | 'outlined' | undefined
• className: HTMLInputTypeAttribute
• onChange: (e: { target: { value: SetStateAction } }) => void
• value: string
• required: boolean
• minLength: number
• maxLength: number
• btn: boolean
• name: string
• width: string
• label: string
• labelRequired: boolean

IFormOptionProps (Used in FormOption)

• options: { label: string; value: string }[]
• width: string
• label: string
• name: string
• labelRequired: boolean

IForm (Used in Form)

• children: ReactNode
• className: string
• validationSchema: any
• initialValues: { [key: string]: any }
• getFormData: any
• id: string

ITableComponentProps (Used in TableComponent)

• column: IColumnData[]
• baseUrl: string
• definedFilters: IDefinedFilters[]
• definedSorts: IDefinedSorts[]
• rowsPerPageOptions: number[]
• handleEdit: (rowData: IRowData) => void
• fetchData: (queryString: string) => IRowData[] ...

Hooks

| Hooks | Props | | -------------------- | ----- | | useDebounce | - value: string- delay: number (optional) |