@samithahansaka/formless-react


React hooks and components for Formless - the universal form adapter for React.

| Bundle Size | Minified | Gzipped |
| ----------- | -------- | ------- |
| ESM | 12.31 KB | ~3.5 KB |

This package provides the React bindings including hooks, components, and context providers.

Installation

``bash
npm install @samithahansaka/formless-react @samithahansaka/formless-core
`

> Note: For most users, we recommend installing @samithahansaka/formless which includes this package and all adapters.

Hooks

$3

Main hook for creating a form instance.

`tsx
import { useUniversalForm } from '@samithahansaka/formless-react';

const form = useUniversalForm({
adapter: myAdapter(),
schema: mySchema,
defaultValues: { name: '', email: '' },
mode: 'onBlur',
});
`

Returns:

- values - Current form values
- errors - Validation errors
- isSubmitting, isValid, isDirty - Form state
- getValue(path), setValue(path, value) - Value accessors
- getError(path), setError(path, error) - Error accessors
- register(path) - Field registration
- handleSubmit(onValid, onInvalid?) - Submit handler
- reset(values?) - Reset form
- trigger(paths?) - Trigger validation

$3

Hook for individual field state.

`tsx
import { useField } from '@samithahansaka/formless-react';

const { value, error, isTouched, isDirty, onChange, onBlur } = useField(
form,
'email'
);
`

$3

Hook for dynamic field arrays.

`tsx
import { useFieldArray } from '@samithahansaka/formless-react';

const { fields, append, remove, swap, move } = useFieldArray(form, 'items');
`

$3

Hook for watching specific field values.

`tsx
import { useWatch } from '@samithahansaka/formless-react';

const email = useWatch(form, 'email');
const [name, age] = useWatch(form, ['name', 'age']);
`

Components

$3

Simple field component with automatic registration.

`tsx
import { Field } from '@samithahansaka/formless-react';

;
`

$3

Component for rendering dynamic arrays.

`tsx
import { FieldArray } from '@samithahansaka/formless-react';


{({ fields, append, remove }) => (
<>
{fields.map((field, index) => (