support autoFocus prop

Author: ugogo

README.md

@@ -46,12 +46,13 @@ export default function App() {
 
 ### Props
 
-| Key         | Type       | Default | Required | Description                                               |
-| ----------- | ---------- | ------- | -------- | --------------------------------------------------------- |
-| length      | `number`   | `4`     | false    | How many items will be rendered                           |
-| onChange    | `function` |         | true     | Function called when the value changes                    |
-| placeholder | `string`   | `·`     | false    | String rendered in each item when no value has been typed |
-| value       | `string`   |         | false    | Control internal input value                              |
+| Key         | Type       | Default    | Required | Description                                               |
+| ----------- | ---------- | ---------- | -------- | --------------------------------------------------------- |
+| autoFocus   | `boolean`  | false      | false    | Focus on render                                           |
+| length      | `number`   | `4`        | false    | How many items will be rendered                           |
+| onChange    | `function` | `() => {}` | true     | Function called when the value changes                    |
+| placeholder | `string`   | `·`        | false    | String rendered in each item when no value has been typed |
+| value       | `string`   | `() => {}` | false    | Control internal input value                              |
 
 ### CSS Properties
 

playground/src/index.tsx

@@ -5,6 +5,6 @@ import ReactInputVerificationCode from 'react-input-verification-code';
 import './index.css';
 
 ReactDOM.render(
-  <ReactInputVerificationCode onChange={console.log} />,
+  <ReactInputVerificationCode autoFocus onChange={console.log} />,
   document.getElementById('root')
 );

src/index.tsx

@@ -10,6 +10,7 @@ const KEY_CODE = {
 };
 
 type Props = {
+  autoFocus?: boolean;
   length?: number;
   onChange?: (data: string) => any;
   onCompleted?: (data: string) => any;
@@ -18,6 +19,7 @@ type Props = {
 };
 
 const ReactInputVerificationCode = ({
+  autoFocus = false,
   length = 4,
   onChange = () => {},
   onCompleted = () => {},
@@ -119,6 +121,13 @@ const ReactInputVerificationCode = ({
     setActiveIndex(-1);
   };
 
+  // autoFocus
+  React.useEffect(() => {
+    if (autoFocus && itemsRef[0].current) {
+      itemsRef[0].current.focus();
+    }
+  }, []);
+
   // handle pasting
   React.useEffect(() => {
     const codeInput = codeInputRef.current;