React Form

Automated the functional part of the React forms:
- Simple design and ease of use
- Style-agnostic
- Validation:
- Basic and complex validators
- Automatic focus and scroll to the first invalid field
- Conditional rendering
- Control fields outside
- Automatic payload generation
- Dynamic patching
- Disabled double submit
- Globally defined elements
- Applicable to any React framework

``jsx




{({props, errors}) => (
<>
Only company domain @domain.com:

{errors.length > 0 && Validation failed {errors}}

)}


{({props, errors}) => (
<>
Password:

{errors.length > 0 && Validation failed {errors}}

)}

console.log(e)}>
{({props}) => (Submit)}




`

Overview

You are building React user interfaces and want to gather input from users, but you also want to validate that input,
including some basic checks and complex custom checks and want to set default values as object for whole form.
Additionally, you aim to generate a request payload and display certain fields conditionally. On top of that you
want to control rendering, component hooks, visualization of the errors and side effects. Furthermore, you would
like to incorporate custom user-defined form fields and buttons, or even utilize third-party components,
while maintaining control over the styling and overall look and feel of the form.

For all these requirements, React Form @sparkui/react-form is exactly what you need.

This module provides a set of reusable React components, Form, FormField, TextField ..., that handle
field validation and payload generation for form inputs. Built with a focus on flexibility, these components
allow for easy integration into your projects and can be styled according to your needs.

Components

$3

The Form component is the parent container that manages the state of the form, handles validation, and prepares the form payload upon submission.

#### Props

- value (object, optional): Initial form state.
- onFieldChange (function(field), optional): A callback called on every field update.
- onStateChange (function(state), optional): A callback called on every update.
- children (ReactNode, required): The FormField components that represent the form fields of the form.

#### Form example
`jsx


{({props, errors}) => (

{errors.length > 0 && Validation failed {errors}}

)}

console.log(e)}>
{({props}) => (Submit)}

`

#### Text form field
`tsx

{({props, errors}) => (


)}

// or with global renderer

renderer="my-input"
param="details.name"
required={true}
params={{
placeholder: "Name"
}}
/>
`

#### Password form field
`tsx

{({props, errors}) => (


)}

// or with global renderer

renderer="my-input"
param={"details.secret"}
required={true}
params={{
placeholder: "Secret"
}}
/>
`

#### Numeric form field
`tsx
value != 2020}>
{({props, errors}) => (


)}

// or with global renderer

renderer="my-input"
param="details.age"
params={{
placeholder: "Age"
}}
/>
`

#### Date form field
`tsx

{({props, errors}) => (


)}

// or with global renderer

renderer="my-input"
param="created"
required={true}
params={{
placeholder: "Age"
}}
/>
`

#### Select form field
`tsx

{({props, errors}) => (



)}

`

#### Checkbox form field
`tsx

{({props, errors}) => (



)}

`

#### Radio form field
`tsx

{({value, props, errors}) => (



)}

`

#### Custom form field
`tsx
param="custom" required={true}>
{({onChange, onBlur, ref, value, errors}) => (
<>
className="form-control"
placeholder="Name"
type="text"
ref={ref}
value={value}
onChange={({target: {value}}) => onChange(value)}
onBlur={({target: {value}}) => onBlur(value)}
/>
{errors.length > 0 && Validation failed {errors}}

)}

`

#### Full example with bootstrap UI
`tsx
const initialState = {personal: {name: '', description: "123", age: 2021}, created: new Date(), status: 'started', color: 'green'};

export const ExampleForm = () => (




renderer="my-input"
param={"personal.name"}
required={true}
params={{
placeholder: "Name"
}}
/>
renderer="my-input"
param={"secret"}
pattern={/^[0-9\-+\/?]+$/}
params={{
placeholder: "Secret"
}}
/>
renderer="my-radio-set"
param={"color"}
params={[
{key: 'red', label: 'Red'},
{key: 'blue', label: 'Blue'},
{key: 'green', label: 'Green'},
]}
/>
renderer="my-submit"
onSubmit={async (e) => console.log(e)}
params={"Submit"}
/>


);


``