Card Using Zoi Common Component

)
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

ZCardContent

`jsx
import React from 'react';
import {ZCard , ZCardContent , ZTypography} from 'react-zoi-commom-components';

class ZCardContent extends React.Component{
constructor(props){
super(props)
this.state = {

}

CardContent Using Zoi Common Component

This Was ZCardContent Using The Zoi-Common-Component


}
}

`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

ZTabPanel

`jsx
import React, { Component } from 'react'

import { ZTab , ZTabList , ZBox , ZTabPanel} from 'react-zoi-common-components'

export default function ZTabPanel() {
const [value, setValue] = React.useState('1');

const handleChange = (event, newValue) => {
setValue(newValue);
};

return (









Item One
Item Two
Item Three


);
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

ZTabs

`jsx
import React, { Component } from 'react'

import { ZTab , ZTabs } from 'react-zoi-common-components'

export default function BasicTabs() {
const [value, setValue] = React.useState(0);

const handleChange = (event, newValue) => {
setValue(newValue);
};

render() {
return (








);
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use. -->

ZTabList

`jsx
import React, { Component } from 'react'
import { ZTab , ZTabs , ZTabList , ZBox , ZTabContext} from 'react-zoi-common-components'

export default function ZTabList() {
const [value, setValue] = React.useState(0);

const handleChange = (event, newValue) => {
setValue(newValue);
};

render() {
return (










);
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use. -->

ToolBar

`jsx
import {ZToolBar , ZAppBar} from 'react-zoi-common-components';
import { useState } from 'react';

export default function AppBarExample () {
return (

icon

);
}
`
Property
Name| Type| Default| Description
--- | --- | --- | ---
children| node||The content of the component.
classes| object ||Override or extend the styles applied to the component. See CSS API below for more details.
color| 'default', 'inherit', 'primary', 'secondary', 'transparent', string| 'primary' |The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.enableColorOnDark bool false .If true, the color prop is applied in dark mode.
position| 'absolute', 'fixed', 'relative'| 'static', 'sticky'| 'fixed' |The positioning type. The behavior of the different options is described in the MDN web docs. Note: sticky is not universally supported and will fall back to static when unavailable.
sx |Array , func, object ||The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details.

ToolTip

`jsx
import React from 'react';
import {ZToolTip , ZButton} from 'react-zoi-common-components';
export default function ZToolTip()
{
return(

Submit

);
}

`
Property

Name| Type| Default| Description
--- | --- | --- | ---
children| node||The content of the component.
classes| object ||Override or extend the styles applied to the component. See CSS API below for more details.
color| 'default', 'inherit', 'primary', 'secondary', 'transparent', string| 'primary' |The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.enableColorOnDark bool false .If true, the color prop is applied in dark mode.
position| 'absolute', 'fixed', 'relative'| 'static', 'sticky'| 'fixed' |The positioning type. The behavior of the different options is described in the MDN web docs. Note: sticky is not universally supported and will fall back to static when unavailable.
sx |Array , func, object ||The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details.

ZDialog

`jsx
import React, { Component } from 'react'

import { ZDialog , ZDialogContent , ZDialogActions , ZDialogTitle , ZButton } from 'react-zoi-common-components'
export default function ZDialog() {
const [open, setOpen] = React.useState(false);

const handleClickOpen = () => {
setOpen(true);
};

const handleClose = () => {
setOpen(false);
};

return (

Open alert dialog

open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>

{"Use Google's location service?"}





We made you to easy interact with the react through this "Zoi Common Component"





Disagree

Agree

);
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

ZAutoComplete

`jsx

import React from 'react';
import { ZAutocomplete } from 'react-zoi-common-components';

export default function ComboBox() {
return (
disablePortal
id="combo-box-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => }
/>
);
}
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
{
label: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
{ label: 'Fight Club', year: 1999 },
{
label: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
];

`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

ZAvator

`jsx
import * as React from 'react';
import {ZAvatar} from 'react-zoi-common-components';

export default function ZAvator() {
return (



);
}

`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

ZDropZone

`jsx
import React from 'react';
import {ZBox , ZDropZone} from 'react-zoi-commmon-components';

const MyComponent = () => {
const handleDrop = (files) => {
console.log('Files dropped:', files);
};

return (



);
};

`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

ZTable

`jsx

import React from 'react';
import { Table, TableBody, TableCell, TableHead, TableRow , TableContainer , TableFooter} from 'react-zoi-common-components';

const rows = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 40 },
];

export default function ZTable() {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);

const handleChangePage = (event, newPage) => {
setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};

return (




ID
Name
Age



{rows.map((row) => (

{row.id}
{row.name}
{row.age}

))}



rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
colSpan={3}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: {
'aria-label': 'rows per page',
},
native: true,
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/>






);
}

`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

TextField

`jsx
import React, { Component } from 'react'

import { ZTextField } from 'react-zoi-common-components'

class TextField extends Component {
constructor(props) {
super(props)
this.state = {
name:""
}
}
render() {
return (

label="name"
value={name}
onChange={(e)=>this.setState({name:e.target.value})}
isLoading={false}
variant="filled"
size="small"
/>

)
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
value | String | | Value represented by this Input if it is controlled.
isLoading | bool | | If true, Skeleton component load.
defaultValue | String | | Default value represented by this Input if it is uncontrolled.
disabled | bool | false| If true, the component is disabled.
error | bool |false | If true, the label is displayed in an error state.
helperText | String | | If true, The error text content.
InputProps | object | | Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.
variant | 'filled'| 'outlined'| 'standard' | outlined| If true, The variant to use.

Button

`jsx
import React, { Component } from 'react'

import { ZButton } from 'react-zoi-common-components'

class Button extends Component {
constructor(props) {
super(props)

}
render() {
return (

)
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
name | String | | Display the button name.
isLoading | bool |false | If true, circular progress load.
disabled | bool | false| If true, the component is disabled.
endIcon | node | | Element placed after the children.
startIcon | node | | Element placed before the children.
color | 'inherit' 'primary' 'secondary' 'success' 'error' 'info' 'warning' string | primary| Element placed before the children.
variant | 'contained' 'outlined''text' string | text| The variant to use..

Typography

`jsx
import React, { Component } from 'react'

import { ZTypography } from 'react-zoi-common-components'

class Typography extends Component {
constructor(props) {
super(props)

}
render() {
return (

Hello
h1. Heading

)
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
align | 'center' 'inherit' 'justify' 'left' 'right' |inherit |Set the text-align on the component..
isLoading | bool |false | If true, circular progress load.
noWrap | bool | false| If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.

Common Dialog

`jsx
import React, { Component } from 'react'

import { ZCommonDialog } from 'react-zoi-common-components'

export default class ZCommonDialogs extends Component {
constructor(props) {
super(props)
this.state = {
isShowModel:true
}
}
cancelButton = () => {
alert("cancel")

this.setState({
isShowModel:false
})
}

okButton = () => {
alert("ok")
}
render() {
return (

this.setState({isShowModel:false})} head="Delete" actionButton={[{ name: 'No', action: this.cancelButton, variant: "outlined", color: "primary" }, { name: 'Yes', action: this.okButton, variant: "contained", color: "primary" }]}>

This is common dialog

)
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
open | bool |false | If true, the component is shown.
children | node | |Dialog children, usually the included sub-components.
close | func | | this is close button functionality,
actionButton | array | | pass button property and action button details like array,

FormControlLabel

`jsx
import React, { Component } from 'react'

import { ZFormControlLabel ,ZRadio } from 'react-zoi-common-components'

class FormControlLabel extends Component {
constructor(props) {
super(props)

}
render() {
return (

} />
} disabled />

)
}
}
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
control | element | | A control element. For instance, it can be a Radio, a Switch or a Checkbox.
checked | bool | | If true, the component appears selected.
classes | object | | Override or extend the styles applied to the component.
componentsProps | { typography?: object } | {} | The props used for each slot inside.
disabled | bool | | If true, the control is disabled.
disableTypography | bool | | If true, the label is rendered as it is passed without an additional typography node.
inputRef | ref | | Pass a ref to the input element.
label | node | | A text or an element to be used in an enclosing label element.
labelPlacement | 'bottom','end','start','top' | 'end' | The position of the label.
onChange | func | | Callback fired when the state is changed. Signature:function(event: React.SyntheticEvent) => void. event: The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean).
slotProps | { typography?: object } | {} | The props used for each slot inside.
sx | Array, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.
value | any | | The value of the component.

CircularProgress

`jsx
import React, { Component } from 'react'

import { ZCircularProgress } from 'react-zoi-common-components'

class CircularProgress extends Component {
constructor(props) {
super(props)

}
render() {
return (

)
}
}
`
Property
Prop Name | Type | Default | Description
--- | --- | --- | ---
classes | object | | Override or extend the styles applied to the component.
color | 'inherit', 'primary', 'secondary', 'error', 'info', 'success', 'warning', string | 'primary' | The color of the component. It supports both default and custom theme colors.
disableShrink | bool | false | If true, the shrink animation is disabled. This only works if variant is indeterminate
size | number, string | 40 | The size of the component. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'.
sx | Array, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.
thickness | number | 3.6 | The thickness of the circle.
value | number | 0 | The value of the progress indicator for the determinate variant. Value between 0 and 100.
variant | 'determinate', 'indeterminate' | 'indeterminate' | The variant to use. Use indeterminate when there is no progress value.

BOX

`jsx
import React, { Component } from 'react'

import { ZBox } from 'react-zoi-common-components'

class Box extends Component {
constructor(props) {
super(props)

}
render() {
return (

sx={{
width: 300,
height: 300,
backgroundColor: 'primary.dark',
'&:hover': {
backgroundColor: 'primary.main',
opacity: [0.9, 0.8, 0.7],
},
}}
/>

)
}
}
`
Property
Prop Name | Type | Default | Description
--- | --- | --- | ---
component| elementType| |The component used for the root node. Either a string to use a HTML element or a component.
sx | Array, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.

Grid

`jsx
import {
ZGrid
} from 'react-zoi-common-components'
function GridExample() {
return (

Control 1

Control 2

);
}

export default GridExample;
`
Property

Name| Type |Default |Description
--- | --- | --- | ---
children| node ||The content of the component.
classes| object||
columns| Array, number, object |12| The number of columns.
columnSpacing| Arraynumber object string ||Defines the horizontal space between the type item components. It overrides the value of the spacing prop.component elementType
container| bool| false |If true, the component will have the flex container behavior. You should be wrapping items with a container.
direction| 'column-reverse', 'column', 'row-reverse', 'row', Array<'column-reverse', 'column', 'row-reverse', 'row'>, object 'row'||Defines the flex-direction style property. It is applied for all screen sizes.
item| bool| false | |
lg| 'auto', number, bool| false |If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the lg breakpoint and wider screens if not overridden.
md| 'auto', number, bool| false |If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the md breakpoint and wider screens if not overridden.
rowSpacing| Array, number, object, string| | Defines the vertical space between the type item components. It overrides the value of the spacing prop.
sm| 'auto', number, bool| false |If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the sm breakpoint and wider screens if not overridden.
spacing| Array, number, object, string| 0 |Defines the space between the type item components. It can only be used on a type container component.

SearchTextBox

`jsx
import {
ZTextBoxSearch,
ZGrid
} from 'react-zoi-common-components'
import { useState } from 'react';
function SearchBoxSample() {
const [search,setSearch]=useState('')
const [data,setData]=useState(["Siva","Ram","Dhanush"])
const handleSearch=(e)=>{
setSearch(e)
// here you will get the search value using that need to filter your data
var fileterData= data.filter(value => value.toLowerCase().includes(e.toLowerCase()) == true)
setData(fileterData)
console.log(data)
}
return (

placeholder={"Search..."}
value={search}
onChange={(value) => handleSearch(value.target.value)}
/>

);
}

export default SearchBoxSample;
`
Property

Prop Name | Type | Default | Description
--- | --- | --- | ---
classes | object | | Override or extend the styles applied to the component.
value | number | | The value of search on change of text box
placeholder | string | | which place holder need to show in text box

ZAlert

`jsx
import {
ZGrid,
ZAlert
} from 'react-zoi-common-components'
function AlertSample() {

return (

Close

}>error alert
warning alert
info alert
success alert

);
}

export default AlertSample;

`
Property

Name | Type | Default | Description
--- | --- | --- | ---
action| node||The action to display. It renders after the message, at the end of the alert.
children| node ||The content of the component.
classes| object ||Override or extend the styles applied to the component. See CSS API below for more details.
closeText| string| 'Close' |Override the default label for the close popup icon button.For localization purposes, you can use the provided translations.
color| 'error'', 'info'', 'success'', 'warning', string ||The color of the component. Unless provided, the value is taken from the severity prop. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
components| { CloseButton?: elementType, CloseIcon?: elementType }| {} |The components used for each slot inside.This prop is an alias for the slots prop. It's recommended to use the slots prop instead.
componentsProps| { closeButton?: object, closeIcon?: object }| {} |The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the slotProps prop. It's recommended to use the slotProps prop instead, as componentsProps will be deprecated in the future.
icon| node ||Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the severity prop. Set to false to remove the icon.
iconMapping| { error?: node, info?: node, success?: node, warning?: node } ||The component maps the severity prop to a range of different icons, for instance success to . If you wish to change this mapping, you can provide your own. Alternatively, you can use the icon prop to override the icon displayed.
onClose| func||Callback fired when the component requests to be closed. When provided and no action prop is set, a close icon button is displayed that triggers the callback when clicked.
severity| 'error'', 'info'', 'success'', 'warning' 'success' ||The severity of the alert. This defines the color and icon used.
slotProps| { closeButton?: object, closeIcon?: object }| {} |The extra props for the slot components. You can override the existing props or add new ones.This prop is an alias for the componentsProps prop, which will be deprecated in the future.
slots| { closeButton?: elementType, closeIcon?: elementType }| {}|The components used for each slot inside.This prop is an alias for the components prop, which will be deprecated in the future.
sx| Array, func, object||The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details.
variant| 'filled', 'outlined', 'standard', string| 'standard' |The variant to use.

Bage

`jsx
import React, { Component } from 'react'

import { ZBage } from 'react-zoi-common-components'

class Bage extends Component {
constructor(props) {
super(props)

}
render() {
return (