react-zoi-common-components v1.0.30

react-zoi-common-components

Made with create-react-library

Install

npm install --save react-zoi-common-components

• Zoi Components Navigation(#react-zoi-common-components -navigation)

  - [TextField](#TextField)
  - [Button](#Button)
  - [Typography](#Typography)
  - [Common Dialog](#CommonDialog)
  - [FormControlLabel](#FormControlLabel)
  - [CircularProgress](#CircularProgress)
  - [Box](#Box) 
  - [Bage](#Bage)    
  - [Grid](#Grid)  
  - [SearchTextBox](#SearchTextBox)   
  - [Alert](#ZAlert) 
  - [Dialog](#Dialog) 
  - [Collapse](#Collapse) 
  - [Chip](#Chip) 
  - [CheckBox](#CheckBox) 
  - [Skeleton](#Skeleton) 
  - [AppBar](#ZAppBar)
  - [IconButton](#IconButton)
  - [Icon](#Icon)
  - [Header](#Header)
  - [Dropzone](#ZDropZone)
  - [Drawer](#Drawer)
  - [Card](#ZCard)
  - [CardContent](#ZCardContent)
  - [Tab](#ZTabs)
  - [TabPanel](#ZTabPanel)
  - [TabList](#ZTabList)
  - [TabContext](#ZTabList)
  - [DialogContent](#ZDialogActions)
  - [DialogTitle](#ZDialogActions)
  - [Dialog](#ZDialogActions)
  - [DialogContentText](#ZDialogActions)
  - [DialogActions](#ZDialogActions)
  - [ToolBar](#ToolBar)
  - [ToolTip](#ToolTip)
  - [DesktopDatePicker](#DesktopDatePicker)
  - [InputAdroment](#InputAdroment)
  - [Link](#link)
  - [AutoComplete](#ZAutoComplete)
  - [Avator](#ZAvator)
  - [DropZone](#ZDropZone)
  - [Table](#ZTable)
  - [TableBody](#ZTable)
  - [TableCell](#ZTable)
  - [TableHead](#ZTable)
  - [TableRow](#ZTable)
  - [TableContainer](#ZTable)
  - [TableFooter](#ZTable)

Drawer

import React, { Component } from 'react'
import { ZButton , ZDrawer } from 'react-zoi-common-components'

const data = [
  {
    name: "Home",
    icon: <HomeOutlined />,
  },
  { name: "Inbox", icon: <InboxOutlined /> },
  { name: "Outbox", icon: <CheckBoxOutlineBlankOutlined /> },
  { name: "Sent mail", icon: <MailOutline /> },
  { name: "Draft", icon: <DraftsOutlined /> },
  { name: "Trash", icon: <ReceiptOutlined /> },
];

  function App() {
  const [open, setOpen] = useState(false);

  const getList = () => (
    <div style={{ width: 250 }} onClick={() => setOpen(false)}>
      {data.map((item, index) => (
        <ListItem button key={index}>
          <ListItemIcon>{item.icon}</ListItemIcon>
          <ListItemText primary={item.name} />
        </ListItem>
      ))}
    </div>
  );

  return (
    <div>
      <ZButton onClick={() => setOpen(true)}>Click me</ZButton>
      <ZDrawer open={open} anchor={"left"} onClose={() => setOpen(false)}>
        {getList()}
      </ZDrawer>
    </div>
  );
}

Property

AutoCompleteAvatar

import React, { useState } from 'react';
import { Autocomplete } from '@material-ui/lab';
import { TextField, Avatar } from '@material-ui/core';

const options = [
  { name: 'Alice', avatar: 'https://i.pravatar.cc/50?img=1' },
  { name: 'Bob', avatar: 'https://i.pravatar.cc/50?img=2' },
  { name: 'Charlie', avatar: 'https://i.pravatar.cc/50?img=3' },
  { name: 'Dave', avatar: 'https://i.pravatar.cc/50?img=4' },
];

const ZAutoCompleteAvatar = () => {
  const [value, setValue] = useState(null);

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

  const renderOption = (option) => (
    <React.Fragment>
      <Avatar alt={option.name} src={option.avatar} />
      {option.name}
    </React.Fragment>
  );

  return (
    <Autocomplete
      value={value}
      onChange={handleChange}
      options={options}
      getOptionLabel={(option) => option.name}
      renderOption={renderOption}
      renderInput={(params) => <TextField {...params} label="Select a user" variant="outlined" />}
    />
  );
};

export default ZAutoCompleteAvatar;

Property

Link

import React from 'react';
import { Link } from 'react-router-dom';

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
};
export default MyComponent;

Property

Controls when the link should have an underline.

InputAdroment

import React, { useState } from 'react';
import Input from '@material-ui/core/Input';
import InputAdornment from '@material-ui/core/InputAdornment';
import SearchIcon from '@material-ui/icons/Search';

function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  function handleSearch(event) {
    // handle search logic here
  }

  return (
    <Input
      placeholder="Search"
      value={searchTerm}
      onChange={(event) => setSearchTerm(event.target.value)}
      endAdornment={
        <InputAdornment position="end">
          <SearchIcon onClick={handleSearch} />
        </InputAdornment>
      }
    />
  );
}

Property

import React, { Component } from 'react'

import { ZCard ,ZHeader} from 'react-zoi-common-components'

class ZCard extends Component {
  constructor(props) {
    super(props)
    this.state={
    open:false
  }
  }
  render() {
    return (
      <div>
        <ZCard>
            <ZHeader>Card Using Zoi Common Component</ZHeader>
        </ZCard>
    )
  }
}

Property

ZCardContent

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

class ZCardContent extends React.Component{
  constructor(props){
  super(props)
    this.state = {
      
    }
    <ZCard>
      <ZHeader>CardContent Using Zoi Common Component</ZHeader>
      <ZCardContent>
          <ZTypography variant="h1" component="h2">This Was ZCardContent Using The Zoi-Common-Component</ZTypography>  
      </ZCardContent>
    </ZCard>
  }
}

Property

ZTabPanel

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 (
    <ZBox sx={{ width: '100%', typography: 'body1' }}>
      <ZTabContext value={value}>
        <ZBox sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <ZTabList onChange={handleChange} aria-label="lab API tabs example">
            <ZTab label="Item One" value="1" />
            <ZTab label="Item Two" value="2" />
            <ZTab label="Item Three" value="3" />
          </ZTabList>
        </ZBox>
        <ZTabPanel value="1">Item One</ZTabPanel>
        <ZTabPanel value="2">Item Two</ZTabPanel>
        <ZTabPanel value="3">Item Three</ZTabPanel>
      </ZTabContext>
    </ZBox>
  );
}

Property

ZTabs

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 (
      <ZBox sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <ZTabs value={value} onChange={handleChange} aria-label="basic tabs example">
          <ZTab label="Item One" {...a11yProps(0)} />
          <ZTab label="Item Two" {...a11yProps(1)} />
          <ZTab label="Item Three" {...a11yProps(2)} />
        </ZTabs>
      </ZBox>
     
  );
  }
}

Property

ZTabList

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 (
     <ZTabContext value={value}>
      <ZBox sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <ZTabList value={value} onChange={handleChange} aria-label="basic tabs example">
          <ZTab label="Item One" {...a11yProps(0)} />
          <ZTab label="Item Two" {...a11yProps(1)} />
          <ZTab label="Item Three" {...a11yProps(2)} />
        </ZTabs>
      </ZBox>
      </ZTabContext>
     
  );
  }
}

Property

ToolBar

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

export default function AppBarExample () {
  return (
    <div>
      <div >
          <ZAppBar position="static" color="primary" enableColorOnDark>
              <ZToolBar variant="dense">
                    icon
              </ZToolBar>
          </ZAppBar>
      </div>
    </div>
  );
}

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 , bool> , func, object ||The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details.

ToolTip

import React from 'react';
import {ZToolTip , ZButton} from 'react-zoi-common-components';
export default function ZToolTip()
{
  return(
  <div>
    <ZToolTip title="Submit">
      <ZButton>Submit</ZButton>
    </ZToolTip>
  </div>
  );
}

Property

ZDialog

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 (
    <div>
      <ZButton variant="outlined" onClick={handleClickOpen}>
        Open alert dialog
      </ZButton>
      <ZDialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <ZDialogTitle id="alert-dialog-title">
          {"Use Google's location service?"}
        </ZDialogTitle>

        <ZDialogContent>

          <DialogContentText id="alert-dialog-description">
           We made you to easy interact with the react through this "Zoi Common Component"
          </ZDialogContentText>

        </ZDialogContent>

        <ZDialogActions>
          <ZButton onClick={handleClose}>Disagree</Button>
          <ZButton onClick={handleClose} autoFocus>
            Agree
          </ZButton>
        </ZDialogActions>

      </ZDialog>
    </div>
  );
}

Property

ZAutoComplete

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

export default function ComboBox() {
    return (
      <ZAutocomplete
        disablePortal
        id="combo-box-demo"
        options={top100Films}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
      />
    );
  }
  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

ZAvator

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

export default function ZAvator() {
  return (
      <ZAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
      <ZAvatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
      <ZAvatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  );
}

Property

ZDropZone

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

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

  return (
    <ZBox sx={{ maxWidth: 600, margin: 'auto' }}>
      <ZDropzone onDrop={handleDrop} accept="image/*" multiple label="Drop files here" />
    </ZBox>
  );
};

Property

ZTable

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 (
  <ZTableContainer component={Paper}>
    <ZTable>
      <ZTableHead>
        <ZTableRow>
          <ZTableCell>ID</TableCell>
          <ZTableCell>Name</TableCell>
          <ZTableCell>Age</TableCell>
        </ZTableRow>
      </ZTableHead>
      <ZTableBody>
        {rows.map((row) => (
          <ZTableRow key={row.id}>
            <ZTableCell>{row.id}</TableCell>
            <ZTableCell>{row.name}</TableCell>
            <ZTableCell>{row.age}</TableCell>
          </ZTableRow>
        ))}
      </ZTableBody>
              <ZTableFooter>
          <ZTableRow>
            <ZTablePagination
              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}
            />
          </ZTableRow>
        </ZTableFooter>

    </ZTable>
  </ZTableContainer>

  );
}

Property

TextField

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 (
      <div>
        <ZTextField
          label="name"
          value={name}
          onChange={(e)=>this.setState({name:e.target.value})}
          isLoading={false}
          variant="filled"
          size="small"
        />
      </div>
    )
  }
}

Property

Button

import React, { Component } from 'react'

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

class Button extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
        <ZButton color="primary" name="Save"></ZButton>
        <ZButton variant="contained" color="success" name="Success" isLoading="true" disabled="true">
        </ZButton>
        <ZButton variant="outlined"color="Secondary" name="Error">
        </ZButton>
      </div>
    )
  }
}

Property

Typography

import React, { Component } from 'react'

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

class Typography extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZTypography isLoading={true}>Hello</ZTypography>
        <ZTypography variant="h1" component="h2">h1. Heading</ZTypography>  
      </div>
    )
  }
}

Property

Common Dialog

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 (
        
       <ZCommonDialog open={this.state.isShowModel} close={() => 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" }]}>
        <div>This is common dialog</div>
      </ZCommonDialog>
    )
  }
}

Property

FormControlLabel

import React, { Component } from 'react'

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

class FormControlLabel  extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZFormControlLabel label="YES" value="yes" control={<ZRadio />} />
       <ZFormControlLabel label="NO" value="no" control={<ZRadio />} disabled />
      </div>
    )
  }
}

Property

CircularProgress

import React, { Component } from 'react'

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

class CircularProgress  extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZCircularProgress  />
       <ZCircularProgress color="secondary"  />
       <ZCircularProgress variant="determinate" value={75} />
      </div>
    )
  }
}

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, bool>, 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

import React, { Component } from 'react'

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

class Box  extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZBox
          sx={{
          width: 300,
          height: 300,
          backgroundColor: 'primary.dark',
          '&:hover': {
          backgroundColor: 'primary.main',
          opacity: [0.9, 0.8, 0.7],
          },
        }}
       />
       <ZBox component="span" sx={{ p: 2, border: '1px dashed grey' }}>
       <ZBox sx={{ border: '1px dashed grey' }}>
      </div>
    )
  }
}

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, bool>, func, object | | The system prop that allows defining system overrides as well as additional CSS styles.

Grid

import {
  ZGrid
} from 'react-zoi-common-components'
function GridExample() {
  return (
    <div>
      <div >
          <ZGrid container spacing={2} >
            <ZGrid item xs={12} sm={6} md={4} >
                  <div>
                     Control 1
                  </div>
              </ZGrid>
             <ZGrid item xs={12} sm={6} md={4} >
                  <div>
                    Control 2
                  </div>
            </ZGrid>
          </ZGrid>
      
      </div>
    </div>
  );
}

export default GridExample;

Property

SearchTextBox

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 (
    <div>
      <div >
          <ZGrid container spacing={2} >
            <ZGrid item xs={12} >
                 <ZTextBoxSearch
                  placeholder={"Search..."} 
                  value={search} 
                  onChange={(value) => handleSearch(value.target.value)}
                 />
              </ZGrid>
          </ZGrid>
      
      </div>
    </div>
  );
}

export default SearchBoxSample;

Property

ZAlert

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

  return (
    <div>
      <div >
          <ZGrid container spacing={2} >
            <ZGrid item xs={12} >
                <ZAlert variant="outlined" severity="error" action={
                  <button  color="inherit" size="small">
                    Close
                  </button>
                }>error alert</ZAlert>
                <ZAlert severity="warning">warning alert </ZAlert>
                <ZAlert severity="info">info alert </ZAlert>
                <ZAlert severity="success">success alert </ZAlert>
              </ZGrid>
          </ZGrid>
      
      </div>
    </div>
  );
}

export default AlertSample;

Property

Bage

import React, { Component } from 'react'

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

class Bage  extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZBage badgeContent={4} color="primary"></ZBage>
       <ZBage color="secondary" badgeContent={0}></ZBage>
       <ZBage color="secondary" overlap="circular" badgeContent=" "></ZBage>
    )
  }
}

Property

Collapse

import React, { Component } from 'react'

import { ZCollapse, ZCardContent, ZContainer } from 'react-zoi-common-components'

class Collapse  extends Component {
  constructor(props) {
    super(props)
    this.state={
    open:false
  }
  }
  render() {
    return (
      <div>
        <ZCollapse in={this.state.open} timeout="auto" unmountOnExit>
          <ZCardContent>
           <ZContainer sx={{ height: 100, lineHeight: 2}}>
            Hello React
           </ZContainer>
          </ZCardContent>
        </ZCollapse>
    )
  }
}

Property

Dialog

import React, { Component } from 'react'

import { ZDialog , ZDialogTitle, ZTypography, ZDialogContent, ZDialogActions, ZButton  } from 'react-zoi-common-components'

class Dialog  extends Component {
  constructor(props) {
    super(props)
    this.state={
      open:true
    }
  }
  render() {
    return (
      <div>
        <ZDialog  open={this.state.open}>
          <ZDialogTitle>
            {" "}
            <ZTypography variant="h4">Lorem ipsum dolor sit amet consectetuer</ZTypography>
          </ZDialogTitle>
          <ZDialogContent>
            <ZTypography variant="h6">
              Are you sure you want to delete this user?
            </ZTypography>
            <ZTypography variant="subtitle2">
              You can't undo this operation
            </ZTypography>
          </ZDialogContent>
          <ZDialogActions>
            <ZButton variant="contained">No</ZButton>
            <ZButton variant="contained" color="error">
              Yes
            </ZButton>
          </ZDialogActions>
        </ZDialog >
    )
  }
}

Property

Header

import React, { Component } from 'react'
import { ZHeader } from 'react-zoi-common-components'

class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
        name:""
    }
  }
  render() {
    return (
      <div>
        <ZHeader title={"helloss"} className={classes.headerDesign} style={height:'80px'}></ZHeader>
      </div>
    )
  }
}

Property

Icon

import React, { Component } from 'react'
import { ZIcon } from 'react-zoi-common-components'

class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
        name:""
    }
  }
  render() {
    return (
      <div>
       <ZIcon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
       <ZIcon sx={{ color: green[500] }}>add_circle</ZIcon>
      </div>
    )
  }
}

Property

| 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | 'inherit' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. component | elementType | | The component used for the root node. Either a string to use a HTML element or a component. fontSize | 'inherit' | 'large' | 'medium' | 'small' | string | 'medium' | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. sx | Array<func | object | bool> | func | object | | The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details.

IconButton

import React, { Component } from 'react'
import { ZIconButton } from 'react-zoi-common-components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';

class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
        name:""
    }
  }
  render() {
    return (
      <div>
        <ZIconButton aria-label="Example">
          <FontAwesomeIcon icon={faEllipsisV} />
        </ZIconButton>
      </div>
    )
  }
}

Property

| 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | 'inherit' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. disabled | bool | false | If true, the component is disabled. disableFocusRipple | string | false | If true, the keyboard focus ripple is disabled. disableRipple | bool | false | If true, the ripple effect is disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class. edge | 'end' | 'start' | false | false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). size | 'small' | 'medium' | 'large' | string | 'medium' | The size of the component. small is equivalent to the dense button styling. sx | Array<func | object | bool> | func | object | false | The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details.

No Data

import React, { Component } from 'react'
import { ZNoData } from 'zoi-node-modules' 

class NoData extends Component{
  constructor(props){
   super(props)
   this.state = {
      nodata:""
   }
  }

  render() {
   return (
      <div>
         <ZNoData
            name="nodata"
            value={this.state.nodata}
         />   
      </div>
   )
  }
}

Property

Paper

import React, { Component } from 'react'

import { ZPaper } from 'zoi-node-modules'

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

    }
  }
  render(){
    return(
      <div>
         <ZPaper elevation={0} />
         <ZPaper elevation={3} variant="outlined" square/>
      </div>
    )
  }
}

Property

Popover

import React, { Component } from 'react'
import { ZPopover } from 'zoi-node-modules' 

class Popover extends Component{
  constructor(props){
    super(props)
    this.state = {
       anchorE1: event.currentTarget  
    }
  }
  
  render(){
    const open = Boolean(anchorE1);
    return (
       <div>
          <ZPopover
             id={"id"}
             open={"open"}
             anchorE1={this.state.anchorE1}
             onClose={handleclose}
             anchorOrigin={{
                vertical:"bottom",
                horizontal:"left"
             }}
             transformOrigin={{
                vertical:"bottom",
                horizontal:"left"
             }}
          />
       </div>
    )
  }
}

Property

Radio Group

import React, { Component } from 'react'
import { ZRadioGroup } from 'zoi-node-modules' 

class RadioGroup extends Component{
  constructor(props){
    super(props)
    this.state = {
       value:""
    }
  }
  render() {
    return (
      <div>
        <ZRadioGroup
          name="use-radio-group" 
          defaultValue="first"
          aria-labelledby="demo-controlled-radio-buttons-group"
          value={this.state.value}
        >  
          <FormControlLabel value="first" label="first" control={<Radio />} />
          <FormControlLabel value="second" label="second" control={<Radio />} />
        </ZRadioGroup>
      </div>
    )
  }
}

Property

Radio

import React, { Component } from 'react'
import { ZRadioGroup } from 'zoi-node-modules' 

class Radio extends Component{
 constructor(props){
   super(props)
   this.state = {
      name:""
      disable:false
   }
 }

 render() {
   return (
      <div>
        <ZRadio
           checked={selectedValue === 'a'}
           onChange={(e)=>this.setState({name:e.target.value})}
           id="use-radio-button"
           value="a"
           name="radio-buttons"
           size="small"
           color="default"
           inputProps={{ 'aria-label': 'A' }}
           disabled={this.state.disable}
        />
      </div>
   )
 }
}

Property

Chip

import React, { Component } from 'react'

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

class Chip  extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZChip label="Chip Filled" />
       <ZChip label="Custom delete icon"
             onClick={handleClick}
             onDelete={handleDelete}
             deleteIcon={<DeleteIcon />}
             variant="outlined"
       />
      <ZChip label="success" color="success" />
       
    )
  }
}

Property

CheckBox

import React, { Component } from 'react'

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

class CheckBox  extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZCheckBox {...label} defaultChecked />
       <ZCheckBox {...label} disabled />
       <ZCheckBox {...label} defaultChecked size="small" />
       <ZCheckBox {...label} defaultChecked color="success" />
    )
  }
}

Property

Skeleton

import React, { Component } from 'react'

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

class Skeleton   extends Component {
  constructor(props) {
    super(props)
  
  }
  render() {
    return (
      <div>
       <ZSk