mattia-ui v0.0.9

mattia-ui

An React UI library. It use React hook to develop and as state manager.

Install

npm i mattia-ui

yarn add mattia-ui

Usage

You can check the usage and start the local development by storybook

yarn storybook

npm run storybook

Component

Button

.

import { Button } from 'mattia-ui'

interface Props{}

const Component: SFC<Props> = props => {
  return (
      <Button type="button" color="primary">
        Primary
      </Button>
  )
}

Icon Button

iconName is equal to material-icons name

import { IconButton } from 'mattia-ui'

interface Props{}

const Component: SFC<Props> = props => {
  return (
    <IconButton iconName='close'>
      Close
    </IconButton>
  )
}

Input

import { Input } from 'mattia-ui'

interface Props{}

const Component: SFC<Props> = props => {
  return (
    <Input type="password" placeholder="testing" />
  )
}

Progress Bar

import { IconButton } from 'mattia-ui'

interface Props{}

const Component: SFC<Props> = props => {
  return (
    <>
      <CircleProgress width={100} height={100} value={60} minValue={0} maxValue={100} strokeWidth={6} />
      <CircleProgress width={100} height={100} value={60} minValue={0} maxValue={100} strokeWidth={6} error />
      <CircleProgress width={100} height={100} value={100} minValue={0} maxValue={100} strokeWidth={6} />
      <div>
        <ProgressBar percentage={30} width={300} />
      </div>
      <div>
        <ProgressBar percentage={100} width={300} />
      </div>
      <div>
        <ProgressBar percentage={60} width={300} error />
      </div>
     </>
  )
}

Further enhancement

The above component is just a part of lastest version.
I suggest you download it and run the storybook to check out of the component.
Also, this project will keep develop.