Zoi-node-modules NPM

zoi-node-modules

Made with create-react-library

Install

npm install --save zoi-node-modules

TextField

import React, { Component } from 'react'

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

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

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

import React, { Component } from 'react'

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

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

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

import React, { Component } from 'react'

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

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

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.

License

MIT © zoi10010

@date-io/date-fns @material-ui/core @material-ui/icons @material-ui/lab @material-ui/pickers classnames date-fns

@everything-registry/sub-chunk-3238

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago