React-Separated-Number-Input

A number input that automatically puts the separators in as you type.

tl;dr

• Install by executing npm install react-separated-number-input or yarn add react-separated-number-input.
• Import by adding import SeparatedNumberInput from 'react-separated-number-input'.
• Use by adding <SeparatedNumberInput groupLengths={[4, 4, 4, 4]} />.

Demo

Minimal demo page is included in sample directory.

Online demo is also available!

Installation

Add React-Separated-Number-Input to your project by executing npm install react-separated-number-input or yarn add react-separated-number-input.

Usage

Here's an example of basic usage:

import React, { useState } from 'react';
import SeparatedNumberInput from 'react-separated-number-input';
 
function MyApp() {
  const [value, setValue] = useState('');
 
  function onChange(event) {
    setValue(event.target.value);
  }
 
  return (
    <SeparatedNumberInput
      onChange={onChange}
      groupLengths={[4, 4, 4, 4]}
      value={value}
    />
  );
}

User guide

SeparatedNumberInput

Displays the input.

Props

Prop name	Description	Example values
defaultValue	Defines the default value for SeparatedNumberInput used as an uncontrolled input.	"1234"
groupLengths	Defines lengths of the groups the input should split the numbers into. For example, given value "12345678" and groupLengths [1, 2, 3] the input will display 1 23 456.	[4, 4, 4, 4]
inputRef	A function that behaves like ref, but it's passed to the <input> rendered by <SeparatedNumberInput> component.	(ref) => { this.input = ref; }
onChange	Defines the function to update the value when it changes in SeparatedNumberInput used as a controlled input.	(event) => console.log(event.target.value);
value	Defines the value to display for SeparatedNumberInput used as a controlled input.	"1234"

Note: You can also safely pass almost any other prop you would pass to <input> element. Exceptions are listed below.

Unsupported props

• inputMode - it's required for React-Separated-Number-Input to trigger numeric keyboard on mobile devices.

License

The MIT License.

Author

Wojciech Maj [e-mail] http://wojtekmaj.pl