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.