├── README.md
├── index.html
├── dist
└── index.html
├── style.css
└── babel.js
/README.md:
--------------------------------------------------------------------------------
1 | # reactform
2 | # reactform
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | React Form
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | React Form
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
2 |
3 | html, body {
4 | margin: 0;
5 | padding: 0;
6 | height: 100%
7 | }
8 |
9 | body {
10 | font-family: 'Roboto',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
11 | color: #444;
12 | background-color: #663b7d;
13 | background-image: linear-gradient(110deg, #663b7d 0%, #92aacf 100%);
14 | }
15 |
16 | .title {
17 | font-family: 'Pacifico', cursive;
18 | }
19 |
20 | .link {
21 | position: absolute;
22 | top: 10px;
23 | right: 15px;
24 | }
--------------------------------------------------------------------------------
/babel.js:
--------------------------------------------------------------------------------
1 | const { useState } = React
2 | const { useForm } = ReactHookForm
3 |
4 | const formStyle = "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2"
5 | const inputStyle = "bg-white h-12 w-full px-5 pr-10 mt-5 rounded-full text-sm border-2 border-solid border-gray-300 focus:outline-none"
6 |
7 | const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
8 |
9 | function App() {
10 | const [isSubmitted, setIsSubmitted] = useState(false)
11 | const { reset, register, formState: { errors }, handleSubmit } = useForm()
12 |
13 | const ErrorMsg = ({ inputName }) => (
14 | <>
15 | {errors[inputName] && (
16 |
17 | {
18 | errors[inputName]['message'] ?
19 | errors[inputName]['message'] :
20 | errors[inputName]['type'] === 'allowed' ?
21 | `invalid username` :
22 | `${inputName} is required`
23 | }
24 |
25 | )}
26 |
27 | )
28 |
29 | const validateUsername = async (value) => {
30 | await sleep(1000);
31 | return value !== "admin";
32 | }
33 |
34 | const onSubmit = data => {
35 | setIsSubmitted(true)
36 | reset()
37 | }
38 |
39 | if (isSubmitted)
40 | return (
41 |
62 | )
63 |
64 | return (
65 |
66 |
128 |
129 | )
130 | }
131 |
132 | ReactDOM.render(
133 | ,
134 | document.getElementById("root")
135 | )
--------------------------------------------------------------------------------