wip

Author: ugogo

examples/basic/package.json

@@ -14,9 +14,9 @@
     "@types/react-dom": "^16.9.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-input-verification-code": "^0.4.1",
     "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5",
-    "react-input-verification-code": "latest"
+    "typescript": "^3.7.5"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

examples/basic/src/index.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactInputVerificationCode from 'react-input-verification-code';
 
-import 'react-input-verification-code/dist/index.css';
 import './index.css';
 
 ReactDOM.render(

examples/basic/yarn.lock

@@ -8527,10 +8527,10 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-input-verification-code@latest:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.3.0.tgz#341e2467b850af196ffb07e3b031fa050b44155e"
-  integrity sha512-EivKrY4aJvFD+viWD1m4W23ziX0PP/kvqcAh4/dgJzol5UkdLS4lqeyExMAMja3651Ses7xp1b7mLwwVCdGlcQ==
+react-input-verification-code@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.4.1.tgz#3a9fb70e305cb85722098e059ed0c3d95d4f9a53"
+  integrity sha512-rAtq67pZpqUJZlnkOQPnE4RsgCHJGOXVlvrOd8DzTOvZNH3gxUflCGgJ/Grd42AnLvLdcTFEKL+RbhbTAlnPQQ==
 
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"

examples/custom-styles/package.json

@@ -14,9 +14,9 @@
     "@types/react-dom": "^16.9.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-input-verification-code": "^0.4.1",
     "react-scripts": "^3.4.1",
-    "typescript": "^3.7.5",
-    "react-input-verification-code": "latest"
+    "typescript": "^3.7.5"
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

examples/custom-styles/src/index.css

@@ -6,35 +6,17 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 1.5;
+  background-color: #1d3557;
 }
 
-main {
-  width: 600px;
-  text-align: center;
+.custom-styles {
+  --ReactInputVerificationCode-itemWidth: 2.5rem;
+  --ReactInputVerificationCode-itemHeight: 3.5rem;
+
+  height: 100vh;
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: #262626;
-}
-
-h1 {
-  margin-bottom: 0;
-}
-
-p {
-  padding: 0 3rem;
-}
-
-.ReactInputVerificationCode__container {
-  --itemWidth: 2.5rem !important;
-  --itemHeight: 3.5rem !important;
 }
 
 .ReactInputVerificationCode__input,
@@ -44,9 +26,7 @@ p {
 }
 
 .ReactInputVerificationCode__item {
-  position: relative;
-  color: #262626;
-  font-weight: 500;
+  background-color: #f1faee;
 }
 
 .ReactInputVerificationCode__item:after {

examples/custom-styles/src/index.tsx

@@ -2,18 +2,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactInputVerificationCode from 'react-input-verification-code';
 
-import 'react-input-verification-code/dist/index.css';
 import './index.css';
 
 ReactDOM.render(
-  <main>
-    <h1>Authenticate your account</h1>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
-      gravida ligula nulla, eu molestie dui vehicula non. Sed volutpat mollis
-      sapien sit amet eleifend. Sed vitae molestie lectus
-    </p>
+  <div className='custom-styles'>
     <ReactInputVerificationCode placeholder='' onChange={console.log} />
-  </main>,
+  </div>,
   document.getElementById('root')
 );

examples/custom-styles/yarn.lock

@@ -8527,10 +8527,10 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-input-verification-code@latest:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.3.0.tgz#341e2467b850af196ffb07e3b031fa050b44155e"
-  integrity sha512-EivKrY4aJvFD+viWD1m4W23ziX0PP/kvqcAh4/dgJzol5UkdLS4lqeyExMAMja3651Ses7xp1b7mLwwVCdGlcQ==
+react-input-verification-code@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.4.1.tgz#3a9fb70e305cb85722098e059ed0c3d95d4f9a53"
+  integrity sha512-rAtq67pZpqUJZlnkOQPnE4RsgCHJGOXVlvrOd8DzTOvZNH3gxUflCGgJ/Grd42AnLvLdcTFEKL+RbhbTAlnPQQ==
 
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"