This repository was archived by the owner on Apr 6, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 468
Expand file tree
/
Copy pathselect.js
More file actions
83 lines (71 loc) · 1.73 KB
/
select.js
File metadata and controls
83 lines (71 loc) · 1.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { useRef, useEffect } from 'react'
import { useField } from '@unform/core'
import { Form } from '@unform/web'
/**
* Select component for Unform (without React Select)
*
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
*/
function Select({ name, label, children, ...rest }) {
const selectRef = useRef(null)
const { fieldName, defaultValue, registerField, error } = useField(name)
useEffect(() => {
registerField({
ref: selectRef,
name: fieldName,
getValue: ref => {
return ref.current?.value
},
setValue: (ref, newValue) => {
ref.current.value = newValue
},
clearValue: ref => {
ref.current.value = ''
},
})
}, [fieldName, registerField])
return (
<div>
<label htmlFor={fieldName}>{label}</label>
<select
id={fieldName}
ref={selectRef}
defaultValue={defaultValue}
{...rest}
>
{children}
</select>
{error && <span className="error">{error}</span>}
</div>
)
}
/**
* Usage
*/
export default function App() {
const formRef = useRef(null)
const handleSubmit = data => {
console.log(data)
}
const selectOptions = [
{ value: 'brazil', label: 'Brazil' },
{ value: 'usa', label: 'USA' },
{ value: 'argentina', label: 'Argentina' },
]
return (
<Form ref={formRef} onSubmit={handleSubmit}>
<Select
name="country"
label="Choose your country"
options={selectOptions}
>
{selectOptions.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</Select>
<button type="submit">Submit</button>
</Form>
)
}