react-input-number

5.0.18

React number input component

Installation

yarn add react-input-number
npm install react-input-number --save

Basic usage

function App() {
  const [num, setNum] = useState(2.2);

  return (
    <InputNumber min={10} max={100} step={0.03} value={num} onChange={setNum} />
  );
}

function App() {
  const [num, setNum] = useState(2.2);
  return (
    <InputNumber min={10} max={100} step={0.03} value={num} onChange={setNum} />
  );
}

enableMobileNumericKeyboard

<InputNumber enableMobileNumericKeyboard /> will open a numeric keyboard on ios and android devices. Notice that on ios the keyboard doesnot contain the .(dot) character for floating numbers.

Demo

2.2(number)

function App() {
  const [num, setNum] = React.useState(2.2);

  return (
    <>
      <div>
        {num}({typeof num})
      </div>
      <InputNumber
        min={10}
        max={100}
        step={0.03}
        value={num}
        onChange={setNum}
      />
      <br />
      <InputNumber
        min={10}
        max={100}
        step={0.03}
        value={num}
        onChange={setNum}
        enableMobileNumericKeyboard
      />
      <br />
      <input
        type="number"
        min={10}
        max={10000000}
        step={0.03}
        value={num}
        onChange={e => setNum(e.target.value)}
      />
    </>
  );
}

function App() {
  const [num, setNum] = React.useState(2.2);
  return (
    <>
      <div>
        {num}({typeof num})
      </div>
      <InputNumber
        min={10}
        max={100}
        step={0.03}
        value={num}
        onChange={setNum}
      />
      <br />
      <InputNumber
        min={10}
        max={100}
        step={0.03}
        value={num}
        onChange={setNum}
        enableMobileNumericKeyboard
      />
      <br />
      <input
        type="number"
        min={10}
        max={10000000}
        step={0.03}
        value={num}
        onChange={e => setNum(e.target.value)}
      />
    </>
  );
}

Made with ♥ by SWIFT CARROT