Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.

Commit 74b8610

Browse files
jpedroschmitzJoão Pedro Schmitz
jpedroschmitz
authored and
João Pedro Schmitz
committed
docs: Create the first examples
1 parent 6dc0743 commit 74b8610

9 files changed

Lines changed: 853 additions & 0 deletions

File tree

‎examples/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Examples
2+
3+
This folder contains Unform examples for different types of components. All of
4+
them were tested and may work properly. You can also customize them for your
5+
needs, hiding labels, styling error messages, etc.
6+
7+
| Name | Link |
8+
| -------- | --------------------------------------------------------------------- |
9+
| Input | [JavaScript](./input.js) - [TypeScript](./typescript/input.tsx) |
10+
| Radio | [JavaScript](./radio.js) - [TypeScript](./typescript/radio.tsx) |
11+
| Textarea | [JavaScript](./textarea.js) - [TypeScript](./typescript/textarea.tsx) |
12+
| Checkbox | [JavaScript](./checkbox.js) - [TypeScript](./typescript/checkbox.tsx) |

‎examples/checkbox.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { useEffect, useRef } from 'react'
2+
3+
import { useField } from '@unform/core'
4+
import { Form } from '@unform/web'
5+
6+
/**
7+
* This example renders one checkbox. If you want to render multiple options,
8+
* check the other checkbox example, or adapt this one.
9+
*
10+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
11+
*/
12+
function Checkbox({ name, value, label, ...rest }) {
13+
const inputRef = useRef()
14+
const { fieldName, defaultValue, registerField, error } = useField(name)
15+
16+
const defaultChecked = defaultValue === value
17+
18+
useEffect(() => {
19+
registerField({
20+
name: fieldName,
21+
ref: inputRef,
22+
getValue: ref => {
23+
return ref.current.checked
24+
},
25+
clearValue: ref => {
26+
/**
27+
* If you want to change the default checked for false or true,
28+
* you can do so here. In this example, when resetting the form,
29+
* the checkbox goes back to its initial state.
30+
*/
31+
ref.current.checked = defaultChecked
32+
},
33+
setValue: (ref, value) => {
34+
ref.current.checked = value
35+
},
36+
})
37+
}, [defaultValue, fieldName, registerField, defaultChecked])
38+
39+
return (
40+
<div>
41+
<input
42+
defaultChecked={defaultChecked}
43+
ref={inputRef}
44+
value={value}
45+
type="checkbox"
46+
id={fieldName}
47+
{...rest}
48+
/>
49+
50+
<label htmlFor={fieldName} key={fieldName}>
51+
{label}
52+
</label>
53+
54+
{error && <span>{error}</span>}
55+
</div>
56+
)
57+
}
58+
59+
/**
60+
* Usage
61+
*/
62+
export default function App() {
63+
const formRef = useRef(null)
64+
65+
function handleSubmit(data) {
66+
/**
67+
* {
68+
* privacy: true || false
69+
* }
70+
*/
71+
console.log(data)
72+
}
73+
74+
return (
75+
<Form ref={formRef} onSubmit={handleSubmit}>
76+
<Checkbox
77+
name="privacy"
78+
value="consent"
79+
label="I agree with the privacy policy"
80+
/>
81+
82+
<button type="submit">Submit</button>
83+
</Form>
84+
)
85+
}

‎examples/input.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { useRef, useEffect } from 'react'
2+
3+
import { useField } from '@unform/core'
4+
import { Form } from '@unform/web'
5+
6+
/**
7+
* This input component supports many <input> types, including:
8+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
9+
* - text
10+
* - number
11+
* - color
12+
* - date
13+
* - datetime-local
14+
* - email
15+
* - hidden
16+
* - time
17+
* - month
18+
* - password
19+
* - range
20+
* - search
21+
* - tel
22+
* - url
23+
* - week
24+
*
25+
* Don't use it with the type `submit` or `reset`; otherwise, bugs will occur.
26+
*/
27+
function Input({ name, type, label, value, ...rest }) {
28+
const inputRef = useRef(null)
29+
const { fieldName, defaultValue, registerField, error } = useField(name)
30+
31+
/**
32+
* If you add a value to the input, it will be considered the default
33+
* This is useful when you have a `<input type="hidden" />`
34+
*
35+
* You can also remove it and use the `initialData` or set dynamically.
36+
*/
37+
const defaultInputValue = value || defaultValue
38+
39+
useEffect(() => {
40+
registerField({
41+
name: fieldName,
42+
ref: inputRef,
43+
getValue: ref => {
44+
return ref.current.value
45+
},
46+
setValue: (ref, value) => {
47+
ref.current.value = value
48+
},
49+
clearValue: ref => {
50+
ref.current.value = ''
51+
},
52+
})
53+
}, [fieldName, registerField])
54+
55+
return (
56+
<div>
57+
<label htmlFor={fieldName}>{label}</label>
58+
59+
<input
60+
type={type || 'text'}
61+
id={fieldName}
62+
ref={inputRef}
63+
defaultValue={defaultInputValue}
64+
{...rest}
65+
/>
66+
67+
{error && <span>{error}</span>}
68+
</div>
69+
)
70+
}
71+
72+
/**
73+
* Usage
74+
*/
75+
export default function App() {
76+
const formRef = useRef(null)
77+
78+
function handleSubmit(data) {
79+
console.log(data)
80+
}
81+
82+
return (
83+
<Form ref={formRef} onSubmit={handleSubmit}>
84+
<Input label="Name" name="name" />
85+
<Input label="Choose a color" name="color" type="color" />
86+
<Input label="Choose a number" name="number" type="number" />
87+
<Input name="secret" type="hidden" value="teste" />
88+
<Input label="email" name="email" type="email" />
89+
<Input label="Month" name="month" type="month" min="2020-09" />
90+
<Input
91+
label="Telephone"
92+
name="telephone"
93+
type="tel"
94+
placeholder="Ex: XX-XXXXX-XXXX"
95+
pattern="[0-9]{2}-[0-9]{5}-[0-9]{4}"
96+
/>
97+
<Input label="password" name="password" type="password" />
98+
<Input label="time" name="time" type="time" min="09:00" max="18:00" />
99+
<Input
100+
label="website"
101+
placeholder="https://example.com"
102+
pattern="https://.*"
103+
name="website"
104+
type="url"
105+
/>
106+
<Input
107+
label="week"
108+
min="2021-W01"
109+
max="2021-W52"
110+
name="week"
111+
type="week"
112+
/>
113+
<Input
114+
label="date"
115+
min="2021-01-01"
116+
max="2021-12-31"
117+
name="date"
118+
type="date"
119+
/>
120+
<Input
121+
label="meeting-time"
122+
min="2020-06-07T00:00"
123+
max="2020-06-14T00:00"
124+
name="meeting"
125+
type="datetime-local"
126+
/>
127+
<Input
128+
label="search"
129+
aria-label="Search through site content"
130+
name="search"
131+
type="search"
132+
/>
133+
<Input type="range" name="volume" label="Volume" min="0" max="10" />
134+
135+
<button type="submit">Submit</button>
136+
</Form>
137+
)
138+
}

‎examples/radio.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { useEffect, useRef } from 'react'
2+
3+
import { useField } from '@unform/core'
4+
import { Form } from '@unform/web'
5+
6+
/**
7+
* This is a Radio component that supports rendering multiple options.
8+
*
9+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
10+
*/
11+
function Radio({ name, label, options, ...rest }) {
12+
const inputRefs = useRef([])
13+
const { fieldName, registerField, defaultValue = '', error } = useField(name)
14+
15+
useEffect(() => {
16+
registerField({
17+
name: fieldName,
18+
ref: inputRefs,
19+
getValue: refs => {
20+
return refs.current.find(input => input?.checked)?.value
21+
},
22+
setValue: (refs, id) => {
23+
const inputRef = refs.current.find(ref => ref.id === id)
24+
if (inputRef) inputRef.checked = true
25+
},
26+
clearValue: refs => {
27+
const inputRef = refs.current.find(ref => ref.checked === true)
28+
if (inputRef) inputRef.checked = false
29+
},
30+
})
31+
}, [fieldName, registerField])
32+
33+
return (
34+
<div>
35+
{label && <p>{label}</p>}
36+
37+
{options.map((option, index) => (
38+
<span key={option.id}>
39+
<input
40+
type="radio"
41+
ref={ref => {
42+
inputRefs.current[index] = ref
43+
}}
44+
id={option.id}
45+
name={name}
46+
defaultChecked={defaultValue.includes(option.id)}
47+
value={option.value}
48+
{...rest}
49+
/>
50+
51+
<label htmlFor={option.id} key={option.id}>
52+
{option.label}
53+
</label>
54+
</span>
55+
))}
56+
57+
{error && <span>{error}</span>}
58+
</div>
59+
)
60+
}
61+
62+
/**
63+
* Usage
64+
*/
65+
export default function App() {
66+
const formRef = useRef(null)
67+
68+
function handleSubmit(data) {
69+
/**
70+
* {
71+
* username: 'jpedroschmitz'
72+
* }
73+
*/
74+
console.log(data)
75+
}
76+
77+
const radioOptions = [
78+
{ id: 'jpedroschmitz', value: 'jpedroschmitz', label: 'jpedroschmitz' },
79+
{ id: 'rocketseat', value: 'rocketseat', label: 'Rocketseat' },
80+
]
81+
82+
return (
83+
<Form ref={formRef} onSubmit={handleSubmit}>
84+
<Radio name="username" label="Choose a username" options={radioOptions} />
85+
86+
<button type="submit">Submit</button>
87+
</Form>
88+
)
89+
}

0 commit comments

Comments
 (0)