reakit
Version:
Toolkit for building accessible rich web apps with React
51 lines (42 loc) • 1.37 kB
text/typescript
import * as React from "react";
import { createComponent } from "reakit-system/createComponent";
import { createHook } from "reakit-system/createHook";
import { useLiveRef } from "reakit-utils/useLiveRef";
import { RoleOptions, RoleHTMLProps, useRole } from "../Role/Role";
import { unstable_FormStateReturn } from "./FormState";
import { FORM_KEYS } from "./__keys";
export type unstable_FormOptions = RoleOptions &
Pick<unstable_FormStateReturn<any>, "submit">;
export type unstable_FormHTMLProps = RoleHTMLProps &
React.FormHTMLAttributes<any>;
export type unstable_FormProps = unstable_FormOptions & unstable_FormHTMLProps;
export const unstable_useForm = createHook<
unstable_FormOptions,
unstable_FormHTMLProps
>({
name: "Form",
compose: useRole,
keys: FORM_KEYS,
useProps(options, { onSubmit: htmlOnSubmit, ...htmlProps }) {
const onSubmitRef = useLiveRef(htmlOnSubmit);
const onSubmit = React.useCallback(
(event: React.FormEvent) => {
onSubmitRef.current?.(event);
if (event.defaultPrevented) return;
event.preventDefault();
options.submit?.();
},
[options.submit]
);
return {
role: "form",
noValidate: true,
onSubmit,
...htmlProps,
};
},
});
export const unstable_Form = createComponent({
as: "form",
useHook: unstable_useForm,
});