Messages must be matched by the following regex:

Appears under "Features" header,`compiler` subheader:

Appears under "Bug Fixes" header,`v-model` subheader, with a link to issue#28:

Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:

The following commit and commit`667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.

A commit message consists of a**header**,**body** and**footer**. The header has a**type**,**scope** and**subject**:

The**header** is mandatory and the**scope** of the header is optional.

If the commit reverts a previous commit, it should begin with`revert:`, followed by the header of the reverted commit. In the body, it should say:`This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.

If the prefix is`feat`,`fix` or`perf`, it will appear in the changelog. However, if there is any[BREAKING CHANGE](#footer), the commit will always appear in the changelog.

Other prefixes are up to your discretion. Suggested prefixes are`docs`,`chore`,`style`,`refactor`, and`test` for non-changelog related tasks.

The scope could be anything specifying the place of the commit change. For example`core`,`compiler`,`ssr`,`v-model`,`transition` etc...

The subject contains a succinct description of the change:

* use the imperative, present tense: "change" not "changed" nor "changes"

* don't capitalize the first letter

* no dot (.) at the end

Just as in the**subject**, use the imperative, present tense: "change" not "changed" nor "changes".

The body should include the motivation for the change and contrast this with previous behavior.

The footer should contain any information about**Breaking Changes** and is also the place to

reference GitHub issues that this commit**Closes**.

**Breaking Changes** should start with the word`BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.

name:CI

on:

push:

branches:

-main

pull_request:

branches:

-main

concurrency:

group:${{ github.workflow }}-${{ github.ref }}

cancel-in-progress:true

jobs:

lint:

runs-on:ubuntu-latest

steps:

-uses:actions/checkout@v4

-name:Install pnpm

uses:pnpm/action-setup@v4

-name:Set node

uses:actions/setup-node@v4

with:

node-version:lts/*

-name:Install

run:pnpm install

-name:Lint

run:pnpm lint

typecheck:

runs-on:ubuntu-latest

steps:

-uses:actions/checkout@v4

-name:Install pnpm

uses:pnpm/action-setup@v4

-name:Set node

uses:actions/setup-node@v4

with:

node-version:lts/*

-name:Install

run:pnpm install

-name:Build

run:pnpm core:build

-name:Typecheck

run:pnpm typecheck

test:

runs-on:ubuntu-latest

steps:

-uses:actions/checkout@v4

-name:Install pnpm

uses:pnpm/action-setup@v4

-name:Set node

uses:actions/setup-node@v4

with:

node-version:lts/*

-name:Install

run:pnpm install

-name:Build

run:pnpm core:build

-name:Test

run:pnpm test

name:Release

permissions:

contents:write

on:

push:

tags:

-'v*'

concurrency:

group:${{ github.workflow }}-${{ github.ref }}

cancel-in-progress:true

jobs:

release:

permissions:

id-token:write

contents:write

runs-on:ubuntu-latest

steps:

-uses:actions/checkout@v4

with:

fetch-depth:0

-name:Install pnpm

uses:pnpm/action-setup@v4

-name:Set node

uses:actions/setup-node@v4

with:

node-version:lts/*

registry-url:https://registry.npmjs.org/

-name:Install

run:pnpm install

-run:npx changeloggithub@latest

env:

GITHUB_TOKEN:${{secrets.GITHUB_TOKEN}}

-name:Publish

run:node scripts/publish.js

env:

NODE_AUTH_TOKEN:${{secrets.NPM_TOKEN}}

NPM_CONFIG_PROVENANCE:true




[Live Demo](https://reactjs-otp-input-demo.vercel.app/)

[](https://nodei.co/npm/reactjs-otp-input/)

Or`yarn`

importReact, {Component }from'react';

import {OtpInput }from'react-otp-input';

import {OtpInput }from'reactjs-otp-input';

exportdefaultconstApp {

constApp= ()=> {

const [otp,setOtp]=useState('');

consthandleChange= (otp)=>setOtp({otp });

consthandleChange= (otp)=>setOtp(otp);

return<OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>}/>;

}

};

<table>