@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
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'
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'
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)