Skip to content

Commit 5829864

Browse files
ajaynsajayns
committed
✨ Demo
1 parent 4a65926 commit 5829864

File tree

3 files changed

+213
-22
lines changed

3 files changed

+213
-22
lines changed

‎src/docs/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<meta name="description" content="CHANGE THIS">
99
<title>React component starter</title>
10+
11+
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
12+
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet">
13+
1014
</head>
1115

1216
<body>

‎src/docs/index.jsx

Lines changed: 109 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,116 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22
import { render } from 'react-dom';
33
import OtpInput from '../../lib';
44
import './styles.css';
55

6-
function Demo() {
7-
return (
8-
<div>
9-
<h1>Demo with examples of the component</h1>
10-
<OtpInput
11-
containerStyle={{ padding: '2em' }}
12-
inputStyle={{
13-
background: 'white',
14-
fontSize: 24,
15-
color: 'black',
16-
border: '1px solid grey',
17-
padding: 16,
18-
}}
19-
numInputs={6}
20-
separator={<span style={{ margin: '1em' }}>-</span>}
21-
separatorStyle={{ fontWeight: 'bold' }}
22-
/>
23-
</div>
24-
);
6+
class Demo extends Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = {
10+
otp: '',
11+
numInputs: 4,
12+
separator: '',
13+
isDisabled: false,
14+
};
15+
}
16+
17+
handleOtpChange = otp => {
18+
this.setState({ otp });
19+
};
20+
21+
handleChange = e => {
22+
this.setState({ [e.target.name]: e.target.value });
23+
};
24+
25+
handleCheck = () => {
26+
this.setState(prevState => ({ isDisabled: !prevState.isDisabled }));
27+
};
28+
29+
handleSubmit = e => {
30+
e.preventDefault();
31+
console.log(this.state.otp);
32+
};
33+
34+
render() {
35+
const { numInputs, separator, isDisabled } = this.state;
36+
37+
return (
38+
<div className="container">
39+
<div className="side-bar">
40+
<a href="https://github.com/ajayns/react-otp-input" target="_blank">
41+
<div className="side-bar__segment side-bar__segment--header">
42+
<h2>react-otp-input</h2>
43+
</div>
44+
</a>
45+
<div className="side-bar__segment">
46+
<label htmlFor="num-inputs">
47+
Number of inputs:
48+
<input
49+
id="num-inputs"
50+
name="numInputs"
51+
type="number"
52+
value={numInputs}
53+
onChange={this.handleChange}
54+
/>
55+
</label>
56+
</div>
57+
<div className="side-bar__segment">
58+
<label htmlFor="separator">
59+
Separator
60+
<input
61+
id="separator"
62+
name="separator"
63+
type="text"
64+
value={separator}
65+
onChange={this.handleChange}
66+
/>
67+
</label>
68+
</div>
69+
<div className="side-bar__segment">
70+
<label htmlFor="disabled">
71+
<input
72+
id="disabled"
73+
name="isDisabled"
74+
type="checkbox"
75+
checked={isDisabled}
76+
onChange={this.handleCheck}
77+
/>
78+
Disabled
79+
</label>
80+
</div>
81+
<div className="side-bar__segment side-bar__segment--bottom">
82+
<a href="https://github.com/ajayns/react-otp-input">
83+
Documentation and Source
84+
</a>
85+
</div>
86+
</div>
87+
<div className="view">
88+
<div className="card">
89+
<form onSubmit={this.handleSubmit}>
90+
<h2>Enter verification code</h2>
91+
<div className="margin-top--small">
92+
<OtpInput
93+
inputStyle={{
94+
width: '3rem',
95+
height: '3rem',
96+
margin: '0 1rem',
97+
fontSize: '2rem',
98+
borderRadius: 4,
99+
border: '1px solid rgba(0,0,0,0.3)',
100+
}}
101+
numInputs={numInputs}
102+
disabled={isDisabled}
103+
onChange={this.handleOtpChange}
104+
separator={<span>{separator}</span>}
105+
/>
106+
</div>
107+
<button className="btn margin-top--large">Continue</button>
108+
</form>
109+
</div>
110+
</div>
111+
</div>
112+
);
113+
}
25114
}
26115

27116
render(<Demo />, document.getElementById('app'));

‎src/docs/styles.css

Lines changed: 100 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,102 @@
11
body {
2-
background: #eee;
3-
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
2+
font-family: 'Lato', sans-serif;
3+
font-size: 16px;
4+
}
5+
6+
a {
7+
text-decoration: none;
8+
color: inherit;
9+
}
10+
11+
.container {
12+
display: flex;
13+
width: 100%;
14+
min-height: 100vh;
15+
height: 100%;
16+
}
17+
18+
.side-bar {
19+
width: 250px;
20+
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
21+
z-index: 1;
22+
position: relative;
23+
}
24+
25+
.side-bar__segment {
26+
padding: 0.5rem 1rem;
27+
}
28+
29+
.side-bar__segment--header {
30+
margin: 1rem 0;
31+
border-bottom: 1px solid lightgray;
32+
border-top: 1px solid lightgray;
33+
}
34+
35+
.side-bar__segment--header:hover {
36+
background-color: rgba(0, 0, 0, 0.1);
37+
}
38+
39+
.side-bar__segment--bottom {
40+
font-weight: bold;
41+
position: absolute;
42+
bottom: 2rem;
43+
}
44+
45+
.view {
46+
display: flex;
47+
align-items: center;
48+
justify-content: center;
49+
width: 100%;
50+
background-color: #f2f2f3;
51+
}
52+
53+
.side-bar__segment > label > input[type='number'],
54+
.side-bar__segment > label > input[type='text'] {
55+
border-radius: 4px;
56+
border: 1px solid lightgrey;
57+
margin: 0.5rem 0;
58+
height: 1.5rem;
59+
padding: 0 0.5rem;
60+
}
61+
62+
.side-bar__segment > label > input[type='checkbox'] {
63+
border-radius: 4px;
64+
border: 1px solid lightgrey;
65+
margin: 0.5rem;
66+
width: 1rem;
67+
height: 1rem;
68+
}
69+
70+
.card {
71+
min-width: 360px;
72+
padding: 2rem;
73+
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
74+
border-radius: 4px;
75+
background: white;
76+
}
77+
78+
.card > form {
79+
display: flex;
80+
flex-direction: column;
81+
align-items: center;
82+
}
83+
84+
.btn {
85+
background-color: #3273dc;
86+
border: none;
87+
padding: 0.5rem 1rem;
88+
color: white;
89+
border-radius: 4px;
90+
}
91+
92+
.margin-top--small {
93+
margin-top: 1rem;
94+
}
95+
96+
.margin-top--medium {
97+
margin-top: 1.5rem;
98+
}
99+
100+
.margin-top--large {
101+
margin-top: 4rem;
4102
}

0 commit comments

Comments
 (0)