1.0.1 • Published 3 years ago

@kensoni/mui-quantity-control v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@kensoni/mui-quantity-control

Changelog

1.0.1

  • Fix required props

Installation

Install packages dependency:

# Install via npm
npm install @emotion/react @emotion/styled @mui/material

# Install via yarn
yarn add @emotion/react @emotion/styled @mui/material

Install component:

# Install via npm
npm i @kensoni/mui-quantity-control

# Install via yarn
yarn add @kensoni/mui-quantity-control

Using

import { ChangeEvent, MouseEvent, useState } from 'react';
import QuantityControl from '@kensoni/mui-quantity-control';

export default function App(){

  const [ value, setValue ] = useState(1);

  const onChange = (e: ChangeEvent<HTMLInputElement>, newValue: number) => {
    setValue(newValue);
  }

  const onClickMinus = (e: MouseEvent<HTMLButtonElement>, newValue: number) => {
    console.log('Clicked minus', newValue)
  }

  const onClickPlus = (e: MouseEvent<HTMLButtonElement>, newValue: number) => {
    console.log('Clicked plus', newValue)
  }

  return (
    <div className="App">
      <QuantityControl 
        value={ 1 } 
        onChange={ onChange }
        onClickMinus={ onClickMinus }
        onClickPlus={ onClickPlus }
      />
    </div>
  )
}

If onClickMinus and onClickPlus functions don't call e.preventDefault(), there's no need to update the value again. Inside QuantityComponent component will call the onChange function.

Props APIs.

1. value

  • Type: number
  • Required: false
  • Default:
  • Description: Current value for QuantityControl.

2. onChange

  • Type: (e: ChangeEvent<HTMLInputElement>, newValue: number) => void
  • Required: false
  • Default:
  • Description: Handle event when value of QuantityControl change. If If onClickMinus and onClickPlus functions don't call e.preventDefault(), this function will be called.

3. onClickMinus

  • Type: (e: MouseEvent<HTMLButtonElement>, newValue: number) => void
  • Required: false
  • Default:
  • Description: Handle event when minus button clicked. If this function don't call e.preventDefault(), inside QuantityComponent component will call the onChange function.

4. onClickMinus

  • Type: (e: MouseEvent<HTMLButtonElement>, newValue: number) => void
  • Required: false
  • Default:
  • Description: Handle event when plus button clicked. If this function don't call e.preventDefault(), inside QuantityComponent component will call the onChange function.

5. className

  • Type: string
  • Required: false
  • Default:
  • Description: HTML class attribute value on div element wrapper of input.

6. sx

  • Type: SxProps<Theme>
  • Required: false
  • Default:
  • Description: Custom styles for div element wrapper of input. See more

7. minusIcon

  • Type: ReactNode
  • Required: false
  • Default: "-"
  • Description: Custom component for minus icon.

8. plusIcon

  • Type: ReactNode
  • Required: false
  • Default: "+"
  • Description: Custom component for plus icon.

9. InputProps

  • Type: Omit<InputProps, keyof InputNumberProps>
  • Required: false
  • Default:
  • Description: All props for Mui Input without prop's InputNumber.

10. ButtonProps

  • Type: { minus?: ButtonProps; plus?: ButtonProps }
  • Required: false
  • Default:
  • Description: ButtonProps for minus and plus buttons.

11. format

  • Type: boolean
  • Required: false
  • Default: false
  • Description: Format value when render value into input.

12. comma

  • Type: boolean
  • Required: false
  • Default: false
  • Description: Format value with separator between integer and decimal is comma (,).

13. formatOnlyBlur

  • Type: boolean
  • Required: false
  • Default: false
  • Description: Only format input number when focus out input.

HTML Props

All props of DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>

With NextJS

Temporarily, SSR is not supported yet, so it can be used with NextJS as follows.

import dynamic from 'next/dynamic';

const QuantityControl = dynamic(
  () => import('@kensoni/mui-quantity-control'),
  { ssr: false }
);

export default function App(){

  return (
    <div className="App">
      <QuantityControl />
    </div>
  )
}