/code-input-react

Best code input for react

Primary LanguageTypeScript

Best input code for react

Current situation with code-input components for React on npm:

  • Some of them use keyCode, which is deprecated and don't work correctly in some mobile browsers
  • Some of them are not controllable. You cannot just set value to whatever you want
  • Some of them don't correctly handle paste event
  • Some of them don't have a blur when the last digit gets filled
  • Some of them don't select previous unfilled digit after the last digit gets filled
  • Some of them have style unnecessary inline object styling
  • Some of them use overhead like styled-components for such a simple component

Give it up! Best input code component for React

DEMO

Basic usage example

import {CodeInputReact} from 'code-input-react';
import 'code-input-react/dist/style.min.css';

const App = () => {
    const [value, setValue] = useState('');
    
    return <CodeInputReact
        length={4}
        value={value}
        onChange={setValue}
        onComplete={(code) => alert(`COMPLETE: ${code}`)}
    />
}

Full usage example

Clone this repo, go to example directory and run yarn install && yarn start.

Check it out live!

  • Play with props in the first story (Customized)
  • See more real-world like example in the second story (DefaultUsage)

Styling

You can import styles from code-input-react/dist/style.min.css, or write your own.

.code-input-react {
    /* container class */
}
.code-input-react--invalid {
    /* invalid container class. appears when <valid> prop is false */
}
.code-input-react--disabled {
    /* disabled container class. appears when <disabled> prop is true */
}
.code-input-react__digit {
    /* input cell class */
}

SMS Autofill

Tested on iOS 14

CodeInputReact Props

Prop Type Description
length number Digits count
value string Current value
onChange (value: string) => void Change handler
onComplete (value: string) => void Change handler, invokes only if all digits are filled
disabled boolean Disabled flag
valid boolean Valid flag
autoFocus boolean Focus first digit on mount flag
type 'number' | 'text' Digit type. Any text symbols or numbers
focusOnInvalid boolean Focus on first digit when valid becomes false, so user can fill out again
innerRef MutableRefObject<CodeInputReactRef | null> Ref to control input outside
className string Container className

CodeInputReactRef

export type CodeInputReactRef = {
  /** Focus n-th digit. */
  focus: (nth?: number) => void;
  /** Use it if you need access for input */
  inputs: Array<HTMLInputElement | null>;
};

CHANGELOG

0.0.1 20.07.2022

  • Initial release

0.0.2 20.07.2022

  • Fix export

0.0.3 20.07.2022

  • Add new API

0.0.4 20.07.2022

  • Change default [valid] param
  • Add usage example

0.0.5 20.07.2022

  • Add sms autofill
  • Update example

0.0.6 07.08.2022

  • Update readme