react-otp-field - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

package.json

 {
   "name": "react-otp-field",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Customizable OTP Field component for the web built with React.js",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # react-otp-field
 
+[![npm version](https://img.shields.io/npm/v/react-otp-field)](https://www.npmjs.com/package/react-otp-field) [![npm](https://img.shields.io/npm/l/react-otp-field)](https://github.com/coded-bear/react-otp-field/blob/main/LICENSE) [![npm](https://img.shields.io/bundlephobia/minzip/react-otp-field)](https://www.npmjs.com/package/react-otp-field)
+
 Customizable OTP Field component for the web built with React.js
 
+[Live Demo](https://coded-bear.github.io/react-otp-field/)
+
+## Installation
+
+```
+npm install --save react-otp-field
+```
+
+## Basic usage
+
+```jsx
+import React, { useState } from 'react';
+import OtpField from 'react-otp-field';
+
+const App = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <OtpField
+      value={value}
+      onChange={setValue}
+      numInputs={6}
+      onChangeRegex={/^([0-9]{0,})$/}
+      autoFocus
+      separator={<span>-</span>}
+      isTypeNumber
+      inputProps={{ className: 'otp-field__input', disabled: false }}
+    />
+  );
+};
+```
+
 ## API
@@ -6,0 +40,0 @@

No alert changes

Improved metrics

Total package byte prevSize

16295

increased by6%

Number of lines in readme file

146

increased by30.36%

No dependency changes