react-separated-number-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    downloads build dependencies dev dependencies tested with jest

    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
    kontakt@wojtekmaj.pl
    http://wojtekmaj.pl

    Install

    npm i react-separated-number-input

    DownloadsWeekly Downloads

    3

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    28.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • wojtekmaj