React

The React adapter exposes helper functions rather than a full React state library. Keep the validator instance stable, subscribe to changes, and drive your own component state from that subscription.

Create one validator instance per form

import { useEffect, useRef, useState } from 'react';
import {
    createFieldProps,
    createReactValidator,
    getErrorProps,
} from 'laravel-client-validation/react';

export default function RegisterForm() {
    const [form, setForm] = useState({ email: '', password: '' });
    const [, forceRender] = useState(0);
    const validatorRef = useRef(null);

    if (validatorRef.current === null) {
        validatorRef.current = createReactValidator({
            rules: {
                email: 'required|email',
                password: 'required|min:8',
            },
        });
    }

    useEffect(() => validatorRef.current.subscribe(() => {
        forceRender((value) => value + 1);
    }), []);

    const validator = validatorRef.current;

    return (
        <form>
            <input
                value={form.email}
                onChange={(event) => setForm({ ...form, email: event.target.value })}
                {...createFieldProps(validator, 'email', {
                    getData: () => form,
                    mode: 'blur',
                })}
            />

            <p {...getErrorProps(validator, 'email')} />
        </form>
    );
}

createFieldProps() can generate blur and change handlers, but you still own controlled input values and the React render cycle.

Validate before submit

const result = await validator.validateAll(form);

if (result.valid) {
    // Post the form or call your mutation.
}

This is the easiest place to keep client-side feedback and Laravel server validation in the same submit flow.

Using with Inertia

The React adapter works unchanged inside Inertia pages. Import the helpers into a page component exactly as shown above, keep one validator instance per form, and subscribe as usual. Validation state lives with the page component, so no extra adapter or provider is needed:

import { createReactValidator } from 'laravel-client-validation/react';

// Inside an Inertia page component. This is identical to any other React page.
const validator = createReactValidator({ rules: { email: 'required|email' } });

Related pages

• Use inertia when the React form lives inside an Inertia page.
• Open usage for the shared rule and remote-validation model.
• Keep examples nearby for package-level snippets.