-
Notifications
You must be signed in to change notification settings - Fork 85
/
form-attributes.tsx
77 lines (72 loc) · 1.95 KB
/
form-attributes.tsx
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
import { getFormProps, useForm } from '@conform-to/react';
import { type LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { useState } from 'react';
import { Field, Playground } from '~/components';
export async function loader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url);
return {
formMethod: url.searchParams.get('formMethod'),
formAction: url.searchParams.get('formAction'),
formEncType: url.searchParams.get('formEncType'),
submitterMethod: url.searchParams.get('submitterMethod'),
submitterAction: url.searchParams.get('submitterAction'),
submitterEncType: url.searchParams.get('submitterEncType'),
};
}
export default function Example() {
const [attributes, setAttributes] = useState<
Record<'method' | 'action' | 'encType', null | string>
>({
method: null,
action: null,
encType: null,
});
const options = useLoaderData<typeof loader>();
const [form] = useForm({
onSubmit(event, { method, action, encType }) {
event.preventDefault();
setAttributes({ method, action, encType });
},
});
return (
<form
action={options.formAction ?? undefined}
method={options.formMethod ?? undefined}
encType={options.formEncType ?? undefined}
{...getFormProps(form)}
>
<Playground
title="Form attributes"
formAction={options.submitterAction ?? undefined}
formMethod={options.submitterMethod ?? undefined}
formEncType={options.submitterEncType ?? undefined}
>
<Field label="Action">
<input
type="text"
name="_action"
value={attributes.action ?? ''}
readOnly
/>
</Field>
<Field label="EncType">
<input
type="text"
name="_enctype"
value={attributes.encType ?? ''}
readOnly
/>
</Field>
<Field label="Method">
<input
type="text"
name="_method"
value={attributes.method ?? ''}
readOnly
/>
</Field>
</Playground>
</form>
);
}