Features

• Lightweight
• Tree‑shakable — import only what you use to keep bundles small
• Minimal re-renders — updates only the fields that actually change
• Native HTML constraint validation — full support for min, max, pattern, minLength, maxLength, required, and more
• Custom Validations – add custom validation with any rules
• Async Validations — run asynchronous rules for server-side checks
• Supports Yup, Zod, and more – use any validation library you like
• Deeply Nested Forms — structure forms however you like, across any number of components
• Dynamic fields — add or remove fields at runtime without losing state
• Native <form> actions — fully supports browser‑level form submission, including action, method, and HTTP navigation, with no JavaScript required
• Next.js Server Actions support — works seamlessly with Server Actions through standard <form> submissions, with no special adapters or client‑side wiring
• Accessibility‑friendly — automatically manages aria-required and aria-invalid
• React Native support — works seamlessly across web and mobile

Documentation

Full documentation, examples, and API reference:

https://gform-react.onrender.com

QuickStart

import {GForm, GInput, GValidator, type GValidators} from "gform-react";

interface SignInForm {
  username: string;
  password: string;
}

const baseValidator = new GValidator().withRequiredMessage('this field is required');

const validators: GValidators<SignInForm> = {
  '*': baseValidator, // a default validator for all other fields in the form

  password: new GValidator(baseValidator)
          .withMinLengthMessage((input) => `${input.formKey} must contain atleast ${input.minLength} chars`),
};

const App: FC = () => {
    return (
            <GForm<SignInForm> className='some-class'
                               validators={validators}
                               onSubmit={(formState, e) => { //can be used with native `action` or with Next.js `server actions`
                                    e.preventDefault();
                                    console.log(formState);
                               }}>
                <GInput formKey='username'
                        required
                        element={(input, props) => <div>
                            <input {...props} placeholder='username'/>
                            {input.error && <small className="p-error">{input.errorText}</small>}
                        </div>}
                />
                <GInput formKey='password' 
                        type='password'
                        required
                        minLength={5}
                        element={(input, props) => <div>
                            <input {...props} placeholder='password'/>
                            {input.error && <small className="p-error">{input.errorText}</small>}
                        </div>}
                />
                <button>Submit</button>
            </GForm>
    );
};

Installation

npm:

npm install gform-react

yarn:

yarn add gform-react

Peer dependencies

react >=16.8.0, react-dom >=16.8.0 are peer dependencies

License

MIT © Tal
https://www.npmjs.com/package/gform-react