Skip to content

Commit cc3a292

Browse files
aranlucasaranlucas
committed
chore: updating README
1 parent 391edfd commit cc3a292

File tree

1 file changed

+282
-6
lines changed

1 file changed

+282
-6
lines changed

‎README.md‎

Lines changed: 282 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,298 @@ The library provides bindings for several Mantine components and does not affect
77

88
## Demo
99

10-
<https://aranlucas.github.io/rhf-mantine>
10+
<https://aranlucas.github.io/react-hook-form-mantine>
11+
<https://codesandbox.io/s/react-hook-mantine-krflqj?file=/src/App.tsx>
1112

1213
## Getting Started
1314

14-
```javascript
15-
npm install rhf-mantine
15+
```bash
16+
npm install react-hook-form-mantine
1617
```
1718

19+
Requires react-hook-form and @mantine/core as peer dependencies.
20+
1821
## Usage/Examples
1922

2023
```javascript
21-
import Component from 'my-project'
24+
import { useForm } from "react-hook-form";
25+
import {
26+
Autocomplete,
27+
Checkbox,
28+
Chip,
29+
ColorInput,
30+
ColorPicker,
31+
FileInput,
32+
JsonInput,
33+
MultiSelect,
34+
NativeSelect,
35+
NumberInput,
36+
PasswordInput,
37+
PinInput,
38+
Radio,
39+
Rating,
40+
SegmentedControl,
41+
Select,
42+
Slider,
43+
Switch,
44+
Textarea,
45+
TextInput,
46+
TransferList
47+
} from "react-hook-form-mantine";
48+
import { Button, Group, Paper, Container, Stack } from "@mantine/core";
49+
import { DevTool } from "@hookform/devtools";
50+
import z from "zod";
51+
import { zodResolver } from "@hookform/resolvers/zod";
52+
53+
const schema = z.object({
54+
autocomplete: z.string().min(1, { message: "Required" }),
55+
checkbox: z.boolean(),
56+
chip: z.boolean(),
57+
colorInput: z.string(),
58+
colorPicker: z.string(),
59+
fileInput: z.any(),
60+
jsonInput: z.string(),
61+
multiSelect: z.any(),
62+
nativeSelect: z.string(),
63+
numberInput: z.number(),
64+
passwordInput: z.string(),
65+
pinInput: z.string(),
66+
radio: z.string(),
67+
rating: z.number(),
68+
segmentedControl: z.string(),
69+
select: z.string(),
70+
slider: z.number(),
71+
switch: z.string(),
72+
textarea: z.string(),
73+
textInput: z.string(),
74+
transferList: z.any()
75+
});
2276

23-
function App() {
24-
return <Component />
77+
type FormSchemaType = z.infer<typeof schema>;
78+
79+
export default function App() {
80+
const { control, handleSubmit } = useForm<FormSchemaType>({
81+
resolver: zodResolver(schema),
82+
defaultValues: {
83+
autocomplete: "",
84+
checkbox: true,
85+
chip: true,
86+
colorInput: "",
87+
colorPicker: "",
88+
fileInput: null,
89+
jsonInput: "",
90+
multiSelect: [],
91+
nativeSelect: "",
92+
numberInput: 18,
93+
passwordInput: "",
94+
pinInput: "",
95+
radio: "",
96+
rating: 2,
97+
segmentedControl: "",
98+
select: "",
99+
slider: 40,
100+
switch: "",
101+
textarea: "",
102+
textInput: "",
103+
transferList: [
104+
[
105+
{ value: "react", label: "React" },
106+
{ value: "ng", label: "Angular" },
107+
{ value: "next", label: "Next.js" },
108+
{ value: "blitz", label: "Blitz.js" },
109+
{ value: "gatsby", label: "Gatsby.js" },
110+
{ value: "vue", label: "Vue" },
111+
{ value: "jq", label: "jQuery" }
112+
],
113+
[
114+
{ value: "sv", label: "Svelte" },
115+
{ value: "rw", label: "Redwood" },
116+
{ value: "np", label: "NumPy" },
117+
{ value: "dj", label: "Django" },
118+
{ value: "fl", label: "Flask" }
119+
]
120+
]
121+
}
122+
});
123+
124+
return (
125+
<div className="App">
126+
<Container size={1000}>
127+
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
128+
<form
129+
onSubmit={handleSubmit(
130+
(data) => console.log(data),
131+
(error) => console.log(error)
132+
)}
133+
>
134+
<Stack spacing="xl">
135+
<Autocomplete
136+
name="autocomplete"
137+
control={control}
138+
label="Your favorite framework/library"
139+
placeholder="Pick one"
140+
data={["React", "Angular", "Svelte", "Vue"]}
141+
/>
142+
<Checkbox
143+
name="checkbox"
144+
value="Test"
145+
control={control}
146+
label="I agree to sell my privacy"
147+
/>
148+
<Chip name="chip" control={control}>
149+
Awesome chip
150+
</Chip>
151+
<ColorInput
152+
name="colorInput"
153+
control={control}
154+
placeholder="Pick color"
155+
label="Your favorite color"
156+
/>
157+
<ColorPicker name="colorPicker" control={control} />
158+
<FileInput
159+
name="fileInput"
160+
control={control}
161+
placeholder="Pick file"
162+
label="Your resume"
163+
withAsterisk
164+
/>
165+
<JsonInput
166+
name="jsonInput"
167+
control={control}
168+
label="Your package.json"
169+
placeholder="Textarea will autosize to fit the content"
170+
validationError="Invalid json"
171+
formatOnBlur
172+
autosize
173+
minRows={4}
174+
/>
175+
<TextInput name="textInput" control={control} label="TextBox" />
176+
<MultiSelect
177+
name="multiSelect"
178+
control={control}
179+
data={[
180+
{ value: "react", label: "React" },
181+
{ value: "ng", label: "Angular" },
182+
{ value: "svelte", label: "Svelte" },
183+
{ value: "vue", label: "Vue" },
184+
{ value: "riot", label: "Riot" },
185+
{ value: "next", label: "Next.js" },
186+
{ value: "blitz", label: "Blitz.js" }
187+
]}
188+
label="Your favorite frameworks/libraries"
189+
placeholder="Pick all that you like"
190+
/>
191+
<NativeSelect
192+
name="nativeSelect"
193+
control={control}
194+
data={["React", "Vue", "Angular", "Svelte"]}
195+
label="Select your favorite framework/library"
196+
description="This is anonymous"
197+
withAsterisk
198+
/>
199+
<NumberInput
200+
name="numberInput"
201+
control={control}
202+
placeholder="Your age"
203+
label="Your age"
204+
withAsterisk
205+
/>
206+
<PasswordInput
207+
name="passwordInput"
208+
control={control}
209+
placeholder="Password"
210+
label="Password"
211+
description="Password must include at least one letter, number and special character"
212+
withAsterisk
213+
/>
214+
<Group position="center">
215+
<PinInput name="pinInput" control={control} />
216+
</Group>
217+
<Radio.Group
218+
name="radio"
219+
control={control}
220+
label="Select your favorite framework/library"
221+
description="This is anonymous"
222+
withAsterisk
223+
>
224+
<Group mt="xs">
225+
<Radio.Item value="react" label="React" />
226+
<Radio.Item value="svelte" label="Svelte" />
227+
<Radio.Item value="ng" label="Angular" />
228+
<Radio.Item value="vue" label="Vue" />
229+
</Group>
230+
</Radio.Group>
231+
<Rating name="rating" control={control} />
232+
<SegmentedControl
233+
name="segmentedControl"
234+
control={control}
235+
data={[
236+
{ label: "React", value: "react" },
237+
{ label: "Angular", value: "ng" },
238+
{ label: "Vue", value: "vue" },
239+
{ label: "Svelte", value: "svelte" }
240+
]}
241+
/>
242+
<Select
243+
name="select"
244+
control={control}
245+
label="Your favorite framework/library"
246+
placeholder="Pick one"
247+
data={[
248+
{ value: "react", label: "React" },
249+
{ value: "ng", label: "Angular" },
250+
{ value: "svelte", label: "Svelte" },
251+
{ value: "vue", label: "Vue" }
252+
]}
253+
/>
254+
<Slider
255+
name="slider"
256+
control={control}
257+
marks={[
258+
{ value: 20, label: "20%" },
259+
{ value: 50, label: "50%" },
260+
{ value: 80, label: "80%" }
261+
]}
262+
/>
263+
<Switch
264+
name="switch"
265+
control={control}
266+
label="I agree to sell my privacy"
267+
/>
268+
<Textarea
269+
name="textarea"
270+
control={control}
271+
placeholder="Your comment"
272+
label="Your comment"
273+
withAsterisk
274+
/>
275+
<TextInput
276+
name="textInput"
277+
control={control}
278+
placeholder="Your name"
279+
label="Full name"
280+
withAsterisk
281+
/>
282+
<TransferList
283+
name="transferList"
284+
control={control}
285+
searchPlaceholder="Search..."
286+
nothingFound="Nothing here"
287+
titles={["Frameworks", "Libraries"]}
288+
breakpoint="sm"
289+
/>
290+
<Group position="left" mt="md">
291+
<Button type="submit">Submit</Button>
292+
</Group>
293+
</Stack>
294+
</form>
295+
<DevTool control={control} /> {/* set up the dev tool */}
296+
</Paper>
297+
</Container>
298+
</div>
299+
);
25300
}
301+
26302
```
27303
28304
## License

0 commit comments

Comments
 (0)