add onChange prop

Author: ugogo

playground/src/index.tsx

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

src/index.tsx

@@ -8,7 +8,13 @@ const KEY_CODE = {
   DELETE: 46,
 };
 
-export default ({ length = 4, placeholder = '·' }) => {
+type Props = {
+  length?: number;
+  onChange: (data: string) => any;
+  placeholder?: string;
+};
+
+export default ({ length = 4, onChange, placeholder = '·' }: Props) => {
   const [activeIndex, setActiveIndex] = React.useState<number>(-1);
   const [value, setValue] = React.useState<string[]>(
     new Array(length).fill(placeholder)
@@ -93,6 +99,10 @@ export default ({ length = 4, placeholder = '·' }) => {
     blurItem(activeIndex);
   };
 
+  React.useEffect(() => {
+    onChange(value.join(''));
+  }, [value]);
+
   return (
     <div
       className='ReactInputVerificationCode__container'