https://github.com/yorrran/react-otp-input

first npm package with Typescript, React
https://github.com/yorrran/react-otp-input

hooks no-external-dependency npm-module react small typescript

Last synced: about 2 months ago
JSON representation

first npm package with Typescript, React

• Host: GitHub
• URL: https://github.com/yorrran/react-otp-input
• Owner: yorrran
• Created: 2019-09-16T10:14:06.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T06:04:23.000Z (about 2 years ago)
• Last Synced: 2024-02-23T04:42:56.472Z (11 months ago)
• Topics: hooks, no-external-dependency, npm-module, react, small, typescript
• Language: TypeScript
• Size: 1.41 MB
• Stars: 1
• Watchers: 1
• Forks: 2
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React otpinput

[![npm_version][npmv-image]][npmv-url]

## Installation

To install the latest version:

```

npm install --save react-optinput

```

Basic usage:

```typescript

import React from 'react';

import ReactDOM from 'react-dom';

import OtpInput from 'react-optinput';

import 'react-optinput/bundle.css';

class Demo extends React.Component {

  render() {

    return (

      


         {

            console.log(value);

          }}

        />

      

    );

  }

}

ReactDOM.render(, document.getElementById('root'));

```


## API

  

    Name


    Type

    Required

    Default

    Description

  

  

    codeLength

    number

    true

    4

    number of input length

  

  

    onInputChange

    function

    no

    ''

    input event when input needs to be passed to parent component

  

  

    disable

    boolean

    no

    ''

    disable inputs

  

## First beta v0.0.3-beta

This beta version is created to demostrate implementing otp/code/pin code input with react in a simpler way. The demo is created using webpack as building base. The package is packed with rollup. It was initially packed using webpack. During the stage of experiements, rollup shows a clear and simpler manner in module bundler.

Dev dependencies and peer dependencies are available for reference in react-optinput. You may need peer dependecies react and react-dom for development purpose. Currently, default style is provided with import 'react-optinput/bundle.css'.

## For you to try

To run the development server:

```

npm run dev

```

## Checklist

- -[x] Add ESlint, Prettier for code quality

- -[ ] Customize style support

- -[ ] CI

- -[ ] Unit tests

## License

MIT

[npmv-image]: https://img.shields.io/npm/v/react-optinput.svg?style=flat-square

[npmv-url]: https://www.npmjs.com/package/react-optinput