Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: ugogo/react-input-verification-code
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 1.0.2
Choose a base ref
...
head repository: ugogo/react-input-verification-code
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
2 contributors
Loading
37 changes: 16 additions & 21 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,27 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": ["./tsconfig.json", "rollup.config.js"]
},
"plugins": ["@typescript-eslint", "react-hooks"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:typescript-sort-keys/recommended",
"standard",
"standard-jsx",
"standard-react",
"prettier",
"plugin:@typescript-eslint/eslint-recommended"
"prettier"
],
"env": {
"node": true
},
"parserOptions": {
"ecmaVersion": 2020,
"ecmaFeatures": {
"legacyDecorators": true,
"jsx": true
}
},
"settings": {
"react": {
"version": "16"
}
"browser": true
},
"rules": {
"space-before-function-paren": 0,
"react/prop-types": 0,
"react/jsx-handler-names": 0,
"react/jsx-fragments": 0,
"react/no-unused-prop-types": 0,
"import/export": 0
"react/jsx-sort-props": "error",
"react/sort-prop-types": "error",
"react-hooks/exhaustive-deps": "warn",
"react-hooks/rules-of-hooks": "error"
}
}
11 changes: 11 additions & 0 deletions .github/dependabot.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates

version: 2
updates:
- package-ecosystem: "npm"
directory: "/" # Location of package manifests
schedule:
interval: "weekly"
3 changes: 1 addition & 2 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -6,8 +6,7 @@ node_modules

# builds
build
dist
.rpt2_cache
lib

# misc
.DS_Store
12 changes: 12 additions & 0 deletions .storybook/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": "@storybook/react"
}
11 changes: 11 additions & 0 deletions .storybook/preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const parameters = {
actions: {
argTypesRegex: "^on[A-Z].*"
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
74 changes: 46 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
### **⚠️ This README is for the `v2` which is currently in beta release<br />The `v1` can been found [here](https://github.com/ugogo/react-input-verification-code/tree/1.0.2)**

---
# react-input-verification-code

A verification code input, autocompletion friendly
A verification code input, mobile autocompletion friendly

[![NPM](https://img.shields.io/npm/v/react-input-verification-code.svg)](https://www.npmjs.com/package/react-input-verification-code) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Features

- Support native autocompletion when receiving a code via SMS
- Support pasted string (when number)
- Support pasted string

## Examples

- [Basic](https://codesandbox.io/s/basic-6ejdp)
- [Controllable](https://codesandbox.io/s/controllable-32dfy)
- [Custom Styles](https://codesandbox.io/s/custom-styles-bw8s4)

## Install
## peerDependencies

```bash
npm install --save react-input-verification-code
```
{
"react": ">=16.0.0",
"react-dom": ">=16.0.0"
}
```

## Install

```bash
yarn add react-input-verification-code
@@ -28,38 +36,48 @@ yarn add react-input-verification-code
## Usage

```tsx
import * as React from 'react';
import ReactInputVerificationCode from 'react-input-verification-code';
import React from 'react';
import ReactInputVerificationCode, {
ReactInputVerificationCodeProps,
} from 'react-input-verification-code';

const customProps: ReactInputVerificationCodeProps = {
autoFocus: true,
};

export default function App() {
return <ReactInputVerificationCode />;
return <ReactInputVerificationCode {...customProps} />;
}
```

## API

### Props

| Key | Type | Default | Required | Description |
| ----------- | ---------- | ---------- | -------- | --------------------------------------------------------- |
| autoFocus | `boolean` | false | false | Focus on render |
| length | `number` | `4` | false | How many items will be rendered |
| onChange | `function` | `() => {}` | false | Function called when the value changes |
| onCompleted | `function` | `() => {}` | false | Function called when the code is completed |
| placeholder | `string` | `·` | false | String rendered in each item when no value has been typed |
| value | `string` | `() => {}` | false | Control internal input value |
| type | `text` or `password` | `text` | false | Display the item value or a password mask |
| passwordMask | `string` | `•` | false | Password mask |

### CSS Properties

The following CSS properties are set globally so you can easily override them to fit your needs

| Key | Default | Description |
| ------------------------------------------ | -------- | ----------------------- |
| `--ReactInputVerificationCode-itemWidth` | `4.5rem` | Width of an item |
| `--ReactInputVerificationCode-itemHeight` | `5rem` | Height of an item |
| `--ReactInputVerificationCode-itemSpacing` | `1rem` | Space between two items |
| Key | Type | Default | Required | Description |
| ----------- | ---------------------------------------------- | ------------ | -------- | -------------------------------------------------- |
| autoFocus | `boolean` | false | false | Should focus on first render |
| inputProps | `React.InputHTMLAttributes<HTMLInputElement>;` | `undefined` | false | Allow passing custom props into the inputs |
| length | `number` | `4` | false | How many inputs will be rendered |
| onChange | `function` | `() => null` | false | Function called when the value changes |
| onCompleted | `function` | `() => null` | false | Function called when the value is completed |
| placeholder | `string` | `·` | false | Inputs placeholder |
| value | `string` | `""` | false | Default value |
| type | `'alphanumeric, number'` | `number` | false | Should accepts alphanumeric values or only numbers |

### Custom Styles

Simply override the styles using the following classnames

```css
.ReactInputVerificationCode-container {
/* */
}

.ReactInputVerificationCode-item {
/* */
}
```

## License

145 changes: 80 additions & 65 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,111 @@
{
"name": "react-input-verification-code",
"version": "1.0.2",
"description": "A verification code input, autocompletion friendly",
"author": "ugogo",
"license": "MIT",
"version": "2.0.0-1",
"description": "A React Verification Code Input, Autocompletion Friendly",
"repository": "ugogo/react-input-verification-code",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.tsx",
"main": "lib/cjs/index.js",
"module": "lib/esm/index.js",
"types": "lib/esm/index.d.ts",
"files": [
"lib"
],
"engines": {
"node": ">=10"
},
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
},
"keywords": [
"react",
"verify",
"verification",
"code",
"pin-code",
"authentication-code",
"input",
"autocompletion",
"otp",
"otp-code",
"one-time-password"
],
"release-it": {
"hooks": {
"before:init": [
"npm run build"
],
"after:release": "npm run storybook:deploy"
},
"git": {
"commitMessage": "v${version}"
"commitMessage": "v${version}",
"requireUpstream": false
},
"github": {
"release": true,
"releaseName": "v${version}"
}
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
"start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
"start:playground": "npm start --prefix playground",
"dev": "run-p start start:playground",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint \"./src/**/*.+(ts|tsx)\"",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"release": "npm run test && npm run prepare && dotenv release-it",
"lint": "eslint . --ext .js,.ts,.tsx",
"format": "prettier --write {src,playground}/**/*.{ts,tsx}",
"format:check": "prettier --check {src,playground}/**/*.{ts,tsx}"
"dev": "npm run storybook",
"dev:watch": "rollup -cw",
"build": "rollup -c",
"release": "dotenv release-it",
"lint": "eslint src --ext .js,.ts,.tsx",
"format": "prettier --write src",
"format:check": "prettier --check src",
"storybook": "start-storybook -p 6006",
"storybook:build": "build-storybook",
"storybook:deploy": "storybook-to-ghpages"
},
"peerDependencies": {
"react": ">=16.0.0",
"styled-components": ">=5.0.0"
"react-dom": ">=16.0.0"
},
"devDependencies": {
"@babel/plugin-transform-react-jsx-self": "^7.16.7",
"@babel/plugin-transform-react-jsx-source": "^7.16.7",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^14.0.4",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.23",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@types/styled-components": "^5.1.24",
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"babel-eslint": "^10.0.3",
"@babel/core": "^7.19.1",
"@rollup/plugin-commonjs": "^24.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@storybook/addon-actions": "^6.5.12",
"@storybook/addon-essentials": "^6.5.12",
"@storybook/addon-interactions": "^6.5.12",
"@storybook/addon-links": "^6.5.12",
"@storybook/builder-webpack4": "^6.5.12",
"@storybook/manager-webpack5": "^6.5.12",
"@storybook/react": "^6.5.12",
"@storybook/storybook-deployer": "^2.8.12",
"@types/node": "^18.7.18",
"@types/react": "^18.0.20",
"@types/react-dom": "^18.0.6",
"@types/styled-components": "^5.1.26",
"@typescript-eslint/eslint-plugin": "^5.38.0",
"@typescript-eslint/parser": "^5.38.0",
"babel-loader": "^8.2.5",
"cross-env": "^7.0.3",
"dotenv-cli": "^5.1.0",
"eslint": "^8.12.0",
"dotenv-cli": "^6.0.0",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard": "^17.0.0",
"eslint-config-standard-jsx": "^11.0.0",
"eslint-config-standard-react": "^11.0.1",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.5",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-standard": "^4.1.0",
"gh-pages": "^3.2.3",
"microbundle-crl": "^0.13.11",
"eslint-plugin-promise": "^6.0.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-typescript-sort-keys": "^2.1.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.6.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.0",
"release-it": "^14.14.0",
"typescript": "^4.6.3"
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"release-it": "^15.4.2",
"rollup": "^4.18.1",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-typescript2": "^0.34.0",
"styled-components": "^5.3.5",
"typescript": "^4.8.3"
},
"files": [
"dist"
],
"keywords": [
"react",
"verify",
"verification",
"code",
"pin-code",
"authentication-code",
"input",
"autocompletion"
]
"author": "Ugo Onali",
"license": "MIT"
}
5 changes: 0 additions & 5 deletions playground/README.md
View file

This file was deleted.

Loading