Nocturnal Pumpkin Maelstrom

    formite-core
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    formite-core

    Easy forms with React hooks

    Installation

    npm install formite-core

    or

    yarn add formite-core

    It is recommended to use Formite with an adapter for your input elements like formite-html.

    Usage without an adapter

    import { useForm, useField } from "formite-core"
     
    const required = (v: unknown) => (v ? "" : "Required field");
     
    const submitValues = (values: unknown) => {
        console.log(values);
    };
     
    const SampleForm = () => {
        const { canSubmit, fields, formErrors, isDirty, submit } = useForm(
            { firstName: "Peter", lastName: "Smith" },
            submitValues,
            { onValidate: handleValidateForm }
        );
        const handleSubmit = useCallback(
            (ev: React.FormEvent<HTMLFormElement>) => {
                ev.preventDefault();
                submit();
            },
            [submit]
        );
        const firstNameField = useField(fields.firstName, required);
        const lastNameField = useField(fields.lastName, required);
        const handleFirstNameChange = useCallback(
            (ev: React.ChangeEvent<HTMLInputElement>) => firstNameField.onChange(ev.currentTarget.value),
            [firstNameField]
        );
        const handleLastNameChange = useCallback(
            (ev: React.ChangeEvent<HTMLInputElement>) => lastNameField.onChange(ev.currentTarget.value),
            [lastNameField]
        );
        return (
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={fields.firstName.value}
                    onBlur={firstNameField.handleBlur}
                    onChange={handleFirstNameChange}
                />
                <span>{fields.firstName.error}</span>
                <input
                    type="text"
                    value={fields.lastName.value}
                    onBlur={lastNameField.handleBlur}
                    onChange={handleLastNameChange}
                />
                <span>{fields.lastName.error}</span>
                <button type="submit" disabled={!canSubmit}>Submit</button>
                <p>{"Is dirty: " + isDirty}</p>
                <p>{"Form errors: " + formErrors.join(", ")}</p>
            </form>
        );
    };

    See Storybook for more examples.

    Install

    npm i formite-core

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    20

    Last publish

    Collaborators

    • joerneu