Create-Hook-Form

Reusable Facade components for creating react-hook-form Forms very fast, featuring:

• Create React forms in just a few lines of code, easily

• Seamless integration with your favorite component libraries

• Maintainable Forms in React

• Stop coding forms from scratch.

# install create-hook-form
npm i create-hook-form

# requires react-hook-form
npm i react-hook-form

optionally to use schema validation: (like zod, yup)

npm i @hookform/resolvers

Features

• Simple Form

<SimpleForm />

• Operation Form

<OperationForm />

• MultiStepForm (WIP)

How To Use

//the main props is fields {id: string, label: string}[]
const fields = [
    { id: 'user', label: 'User' },
    { id: 'password', label: 'Password', type: 'password' },
];

function onSubmit(data) {
    console.log('logging in', data);
}

<SimpleForm fields={fields} onSubmit={onSubmit} />;

Simple Form

For more simple forms like: contact form, sign/log in

import { SimpleForm } from 'create-hook-form';

Operation Form

Crud operations like Create and Update

Example:

import { OperationForm } from 'create-hook-form';

const [operationState, setOperationState] = useState<'create' | 'update'>(
    'create'
);

<OperationForm
    fields={[
        {
            id: 'project-name',
            label: 'Project Name',

            helperText: 'select a great and memorable name',
            hideOnEditMode: true,
        },
        {
            id: 'project-desc',
            label: 'Project description',
        },
        {
            id: 'project-length',
            label: 'Project length',
            helperText: 'current left',
            components: {
                helper: ({ children }) => <Tag mt="4">{children}</Tag>,
            },
        },
    ]}
    onSubmit={[console.log, console.log]}
    onError={[console.log, console.log]}
    components={{
        wrapper: ({ children, errors, name }) => (
            <FormControl isInvalid={!!errors?.[name]}>{children}</FormControl>
        ),
        input: Input,
        helper: FormHelperText,
        error: FormErrorMessage,
        label: FormLabel,
    }}
    header={({ operation }) => (
        <Heading as={'h2'}>
            {operation === 'create' ? 'Create' : 'Edit'} Project
        </Heading>
    )}
    submit={() => (
        <Button type="submit" mt={4} float="right">
            Submit
        </Button>
    )}
    setValuesToUpdate={{ 'project-length': '999' }}
    footer={({ reset }) => (
        <Button colorScheme={'messenger'} mt={4} onClick={reset}>
            Reset
        </Button>
    )}
    operation={operationState}
    schema={[CreateProjectSchema, EditProjectSchema]}
/>;

Examples

all examples are in the same project link you can analyze src/examples to get inspired

Core Features

• LoginForm

UI Libraries

Props API

options marked as ? are optional

    //SimpleForm
    fields: ControlledFormInputProps[];
    onSubmit: SubmitHandler<V>;
    onError: SubmitErrorHandler<V>;
    schema?: Resolver<V>;
    components?: FormComponents; //base components


    //OperationForm
    schema?: [Resolver<V>,Resolver<V>]; //tuple
    operation: Operation;
    onSubmit: [SubmitHandler<V>,SubmitHandler<V>]; //tuple
    onError: [SubmitErrorHandler<V>,SubmitErrorHandler<V>]; //tuple

    fields: ControlledFormInputProps[];
    setValuesToUpdate?: { [id: string]: any };
    components?: FormComponents; //base components

fields

type ControlledFormInputProps = {
    id: string;
    label?: string;
    defaultValue?: any;
    isOptional?: boolean;
    helperText?: string;
    components?: FormComponents;
};

components

type FormComponents = {
    input?: InputWithFields; // render the input (here you may put imported Input from libraries like Material, Chakra, etc....)
    label?: ComponentWithChildrenAndProps;
    helper?: ComponentWithChildrenAndProps; //display HelperText
    error?: ComponentWithChildrenAndProps; //display the error
    wrapper?: ComponentWithChildrenAndProps; // surrounds every Other
};