A comprehensive React components library based on Material-UI.
npm install @amit_g0swami/react-ui-library
# or
yarn add @amit_g0swami/react-ui-libraryimport React from 'react';
import { YourComponent } from '@amit_g0swami/react-ui-library';
const App = () => {
return (
<div>
<YourComponent />
</div>
);
};
export default App;To view and interact with the components, you can use Storybook. Run the following command:
npm run storybook
# or
yarn storybookVisit http://localhost:6006/ in your browser to see the Storybook.
| 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 |
type: HTMLInputTypeAttributeplaceholder: stringdisabled: booleanvariant: 'standard' | 'filled' | 'outlined' | undefinedclassName: HTMLInputTypeAttributeonChange: (e: { target: { value: SetStateAction } }) => voidvalue: stringrequired: booleanminLength: numbermaxLength: numberbtn: booleanname: stringwidth: stringlabel: stringlabelRequired: boolean
options: { label: string; value: string }[]width: stringlabel: stringname: stringlabelRequired: boolean
children: ReactNodeclassName: stringvalidationSchema: anyinitialValues: { [key: string]: any }getFormData: anyid: string
column: IColumnData[]baseUrl: stringdefinedFilters: IDefinedFilters[]definedSorts: IDefinedSorts[]rowsPerPageOptions: number[]handleEdit: (rowData: IRowData) => voidfetchData: (queryString: string) => IRowData[]
...
| Hooks | Props |
|---|---|
| useDebounce | - value: string- delay: number (optional) |