Skip to content

Commit d6da65d

Browse files
author
ugogo
committed
add controllable example
1 parent 0692c62 commit d6da65d

File tree

15 files changed

+10999
-10
lines changed

15 files changed

+10999
-10
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ A verification code input, autocompletion friendly
1414
- Basic
1515
- [CodeSandbox](https://codesandbox.io/s/basic-6ejdp)
1616
- [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/basic/src/index.tsx)
17+
- Controllable
18+
- [CodeSandbox](https://codesandbox.io/s/controllable-32dfy)
19+
- [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/controllable/src/index.tsx)
1720
- Custom Styles
1821
- [CodeSandbox](https://codesandbox.io/s/custom-styles-bw8s4)
1922
- [Source](https://github.com/ugogo/react-input-verification-code/tree/master/examples/custom-styles/src/index.tsx)
@@ -48,6 +51,7 @@ export default function App() {
4851
| length | `number` | `4` | false | How many items will be rendered |
4952
| onChange | `function` | | true | Function called when the value changes |
5053
| placeholder | `string` | `·` | false | String rendered in each item when no value has been typed |
54+
| value | `string` | | false | Control internal input value |
5155

5256
### CSS Properties
5357

‎examples/basic/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@types/react-dom": "^16.9.7",
1515
"react": "^16.13.1",
1616
"react-dom": "^16.13.1",
17-
"react-input-verification-code": "^0.6.2",
17+
"react-input-verification-code": "^0.6.3",
1818
"react-scripts": "^3.4.1",
1919
"typescript": "^3.7.5"
2020
},

‎examples/basic/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8527,10 +8527,10 @@ react-error-overlay@^6.0.7:
85278527
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
85288528
integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
85298529

8530-
react-input-verification-code@^0.6.2:
8531-
version "0.6.2"
8532-
resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.6.2.tgz#2b221a6d2d2e9ea5cc8496d25a07b03029d38250"
8533-
integrity sha512-VHUhJNEmnfUomxTm395yQscQx13eRvma3sJyoJQDGt3/eaXKD63IY59eiu71RiCwemo5qxlMlR+7UyJIWF828w==
8530+
react-input-verification-code@^0.6.3:
8531+
version "0.6.3"
8532+
resolved "https://registry.yarnpkg.com/react-input-verification-code/-/react-input-verification-code-0.6.3.tgz#119a6bb18a51a4374ba9587f4f89713db80df60d"
8533+
integrity sha512-NZVg3mUvXnremXpxgoiFXBlINkygofHZAb9mrI1nsiye/3IhWXqVGCzbVv+4xaDbMtmvEar0Yp/Ujfm8Bqj74w==
85348534

85358535
react-is@^16.8.1, react-is@^16.8.4:
85368536
version "16.13.1"

‎examples/controllable/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/controllable/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-input-verification-code": "^0.6.3",
18+
"react-scripts": "^3.4.1",
19+
"typescript": "^3.7.5"
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/controllable/public/favicon.ico‎

3.78 KB
Binary file not shown.

‎examples/controllable/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/controllable/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/controllable/src/index.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
}
15+
16+
button {
17+
display: block;
18+
margin: 2rem auto;
19+
}

‎examples/controllable/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 './index.css';
6+
7+
const App = () => {
8+
const [value, setValue] = React.useState('');
9+
const clearValue = () => setValue('');
10+
11+
return (
12+
<>
13+
<ReactInputVerificationCode onChange={setValue} value={value} />
14+
<button onClick={clearValue}>Clear</button>
15+
</>
16+
);
17+
};
18+
19+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)