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 pathtextarea.tsx
More file actions
85 lines (70 loc) · 1.86 KB
/
textarea.tsx
File metadata and controls
85 lines (70 loc) · 1.86 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
84
85
import { useRef, useEffect, TextareaHTMLAttributes } from 'react'
import { useField, SubmitHandler, FormHandles } from '@unform/core'
import { Form } from '@unform/web'
/**
* Textarea component for Unform.
*
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
*/
interface Props {
name: string
label?: string
}
type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & Props
function Textarea({ name, label, ...rest }: TextareaProps) {
const textareaRef = useRef(null)
const { fieldName, defaultValue = '', registerField, error } = useField(name)
useEffect(() => {
registerField({
name: fieldName,
ref: textareaRef,
getValue: ref => {
return ref.current.value
},
setValue: (ref, value) => {
ref.current.value = value
},
clearValue: ref => {
ref.current.value = ''
},
})
}, [fieldName, registerField])
/**
* If you need to set a default value for the textarea,
* use the initial data property on your form,
* or set it dynamically (be aware of the differences).
*
* initial data: https://unform.dev/guides/initial-data
* set field value: https://unform.dev/guides/get-set-field-value
*/
return (
<div>
{label && <label htmlFor={fieldName}>{label}</label>}
<textarea
ref={textareaRef}
id={fieldName}
defaultValue={defaultValue}
{...rest}
/>
{error && <span>{error}</span>}
</div>
)
}
/**
* Usage
*/
interface FormData {
bio: string
}
export default function App() {
const formRef = useRef<FormHandles>(null)
const handleSubmit: SubmitHandler<FormData> = data => {
console.log(data)
}
return (
<Form ref={formRef} onSubmit={handleSubmit}>
<Textarea label="Describe yourself" name="bio" />
<button type="submit">Submit</button>
</Form>
)
}