@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>
  )
}