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
• API
• Example of usage
• Contributing
• License

Built with

• TypeScript
• React
• Goober
• tsdx

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'));

Contributing

Feel free to open issues and pull requests!

License

This project is licensed under the terms of the MIT license.