Skip to content

Commit 910624a

Browse files
author
ugogo
committed
add custom-styles example
1 parent e1626c8 commit 910624a

File tree

11 files changed

+11039
-4
lines changed

11 files changed

+11039
-4
lines changed

‎README.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ A verification code input, autocompletion friendly
99
- Basic
1010
- [CodeSandbox](https://codesandbox.io/s/basic-6ejdp)
1111
- [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/basic/src/index.tsx)
12+
- Custom Styles
13+
- [CodeSandbox](https://codesandbox.io/s/custom-styles-bw8s4)
14+
- [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/custom-styles/src/index.tsx)
1215

1316
## Install
1417

@@ -34,10 +37,10 @@ export default function App() {
3437

3538
## API
3639

37-
| Key | Type | Default | Description |
38-
| ----------- | --------- | ------- | ------------------------------- |
39-
| length | `number` | `4` | How many items will be rendered |
40-
| placeholder | `Element` | `·` | Element rendered when no value |
40+
| Key | Type | Default | Description |
41+
| ----------- | -------- | ------- | --------------------------------------------------------- |
42+
| length | `number` | `4` | How many items will be rendered |
43+
| placeholder | `string` | `·` | String rendered in each item when no value has been typed |
4144

4245
## License
4346

‎examples/custom-styles/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2+
3+
It is linked to the react-input-verification-code package in the parent directory for development purposes.
4+
5+
You can run `yarn install` and then `yarn start` to test your package.

‎examples/custom-styles/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "react-input-verification-code-example",
3+
"homepage": ".",
4+
"version": "0.0.0",
5+
"private": true,
6+
"scripts": {
7+
"start": "react-scripts start",
8+
"build": "react-scripts build",
9+
"test": "react-scripts test",
10+
"eject": "react-scripts eject"
11+
},
12+
"dependencies": {
13+
"@types/react": "^16.9.27",
14+
"@types/react-dom": "^16.9.7",
15+
"react": "^16.13.1",
16+
"react-dom": "^16.13.1",
17+
"react-scripts": "^3.4.1",
18+
"typescript": "^3.7.5",
19+
"react-input-verification-code": "0.1.4"
20+
},
21+
"devDependencies": {
22+
"@babel/plugin-syntax-object-rest-spread": "^7.8.3"
23+
},
24+
"eslintConfig": {
25+
"extends": "react-app"
26+
},
27+
"browserslist": {
28+
"production": [
29+
">0.2%",
30+
"not dead",
31+
"not op_mini all"
32+
],
33+
"development": [
34+
"last 1 chrome version",
35+
"last 1 firefox version",
36+
"last 1 safari version"
37+
]
38+
}
39+
}

‎examples/custom-styles/public/favicon.ico‎

3.78 KB
Binary file not shown.

‎examples/custom-styles/public/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9+
/>
10+
<meta name="theme-color" content="#000000" />
11+
12+
<!--
13+
manifest.json provides metadata used when your web app is added to the
14+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
15+
-->
16+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17+
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>react-verification-code</title>
28+
</head>
29+
30+
<body>
31+
<noscript>
32+
You need to enable JavaScript to run this app.
33+
</noscript>
34+
35+
<div id="root"></div>
36+
37+
<!--
38+
This HTML file is a template.
39+
If you open it directly in the browser, you will see an empty page.
40+
41+
You can add webfonts, meta tags, or analytics to this file.
42+
The build step will place the bundled scripts into the <body> tag.
43+
44+
To begin the development, run `npm start` or `yarn start`.
45+
To create a production bundle, use `npm run build` or `yarn build`.
46+
-->
47+
</body>
48+
</html>

‎examples/custom-styles/public/manifest.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "react-verification-code",
3+
"name": "react-verification-code",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎examples/custom-styles/src/index.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
5+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
6+
sans-serif;
7+
-webkit-font-smoothing: antialiased;
8+
-moz-osx-font-smoothing: grayscale;
9+
10+
height: 100vh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
line-height: 1.5;
15+
}
16+
17+
main {
18+
width: 600px;
19+
text-align: center;
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
align-items: center;
24+
color: #262626;
25+
}
26+
27+
h1 {
28+
margin-bottom: 0;
29+
}
30+
31+
p {
32+
padding: 0 3rem;
33+
}
34+
35+
.ReactInputVerificationCode__container {
36+
--itemWidth: 2.5rem !important;
37+
--itemHeight: 3.5rem !important;
38+
}
39+
40+
.ReactInputVerificationCode__input,
41+
.ReactInputVerificationCode__item {
42+
--boxShadowSize: 0 !important;
43+
border-radius: 0;
44+
}
45+
46+
.ReactInputVerificationCode__item {
47+
position: relative;
48+
color: #262626;
49+
font-weight: 500;
50+
}
51+
52+
.ReactInputVerificationCode__item:after {
53+
content: '';
54+
display: block;
55+
position: absolute;
56+
left: 0;
57+
bottom: 0;
58+
right: 0;
59+
height: 2px;
60+
background-color: #ebebeb;
61+
transition: background-color 0.2s ease-out;
62+
}
63+
64+
.ReactInputVerificationCode__item.is-active:after {
65+
background-color: #046cde;
66+
}

‎examples/custom-styles/src/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import ReactInputVerificationCode from 'react-input-verification-code';
4+
5+
import 'react-input-verification-code/dist/index.css';
6+
import './index.css';
7+
8+
ReactDOM.render(
9+
<main>
10+
<h1>Authenticate your account</h1>
11+
<p>
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
13+
gravida ligula nulla, eu molestie dui vehicula non. Sed volutpat mollis
14+
sapien sit amet eleifend. Sed vitae molestie lectus
15+
</p>
16+
<ReactInputVerificationCode placeholder='' />
17+
</main>,
18+
document.getElementById('root')
19+
);

‎examples/custom-styles/src/react-app-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

‎examples/custom-styles/tsconfig.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"compilerOptions": {
3+
"outDir": "dist",
4+
"module": "esnext",
5+
"lib": ["dom", "esnext"],
6+
"moduleResolution": "node",
7+
"jsx": "react",
8+
"sourceMap": true,
9+
"declaration": true,
10+
"esModuleInterop": true,
11+
"noImplicitReturns": true,
12+
"noImplicitThis": true,
13+
"noImplicitAny": true,
14+
"strictNullChecks": true,
15+
"suppressImplicitAnyIndexErrors": true,
16+
"noUnusedLocals": true,
17+
"noUnusedParameters": true,
18+
"allowSyntheticDefaultImports": true,
19+
"target": "es5",
20+
"allowJs": true,
21+
"skipLibCheck": true,
22+
"strict": true,
23+
"forceConsistentCasingInFileNames": true,
24+
"resolveJsonModule": true,
25+
"isolatedModules": true,
26+
"noEmit": true
27+
},
28+
"include": ["src"],
29+
"exclude": ["node_modules", "build"]
30+
}

0 commit comments

Comments
 (0)