Tfa-input NPM | npm.io

tfa-input

Tfa-input is a cool and customizable component built with TypeScript ready to drop in your projects.

Table of content

Built with

Installation

You can use npm

npm i tfa-input

or via Yarn

yarn add tfa-input

API

Option	Type	Required	Default	Description
`value`	`string` / `number`	`false`	`[]`	The value of the input passed into the component.
`onSubmit`	`function`	`true`	`undefined`	Function called when the user filled in the code.
`autoFocus`	`boolean`	`false`	`false`	Optional boolean param to control whether the input should be autofocused on mount.
`containerStyle`	`string` (className) / `object` (style)	`false`		Style applied or class passed to container of cells.
`cellNumberStyle`	`string` / `object`	`false`		Style applied or class passed to each cell.
`inputStyle`	`string` / `object`	`false`		Style applied or class passed to input.
`focusColor`	`string`	`false`	`#23d9d9`	Color of input cell on focus state.

Example of usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TfaInput } from 'tfa-input';


const App = () => {
  return (
    <div>
      <TfaInput
        value={123456}
        autoFocus
        onSubmit={(code) => console.log(code)}
        containerStyle="container-classname"
        cellNumberStyle={{ fontSize: '26px'}}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));