React Field

Automated the functional part of the React input fields:
- 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
- Dynamic patching
- Globally defined elements
- Applicable to any React framework

$3

The Field component is the child container that manages the state of the form field.

#### Props

- param (string, optional): Comma separated json path for the payload.
- required (boolean, optional): Required value from the user
- min (number, optional): Min value
- max (number, optional): Max value
- minLength (number, optional): Min length
- maxLength (number, optional): Max length
- custom (function(value?: T) => boolean, optional): Custom validator
- children (function(props: FieldChildrenProps) => ReactNode, required): Field renderer
- onChange (function(value?: T) => void, required): Set new value
- onBlur (function(value?: T) => void), required: Mark as touched and set new value
- ref (RefObject, required): Reference that should be forwarded to focusable element
- value (V, optional): Current value
- fields (Field[], optional): All fields
- getField (function(value: string) => Field, required): Find field object by param
- getValue (function(value: string) => V, required): Find value of some another field by param
- props (any, optional): Props prepared for native elements
- params (any, optional): Custom params

``tsx
param="custom" required={true}>
{({
onChange, // Register change
onBlur, // Register blor
ref, // Reference intended for the focus in case of errors
value, // Current value
errors, // List of errors triggered with onBlur or onChange when touched
fields, // List of all fields in the form
getValue, // Get value of any field by param
fetField, // Get field object of any field by param
}) => (
<>
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}}

)}

`

#### Instances
- TextField
- EmailField
- PasswordField
- NumericField
- DateField
- SelectField
- CheckBoxField
- RadioField
- FilesField

$3


`tsx
export const Text = () => (

renderer="my-input"
param="name"
params={{
placeholder: "Name"
}}
/>

);
`

$3

`tsx
export const CheckBox = () => (

renderer="my-checkbox"
param="new"
params={{
input: {placeholder: "New"},
label: "New"
}}
/>

);
`

$3

`tsx
export const Password = () => (

renderer="my-input"
param="secret"
pattern={/^[0-9\-+\/?]+$/}
params={{
placeholder: "Secret"
}}
/>

);
`

$3

`tsx
export const RadioSet = () => (

renderer="my-radio-set"
param="color"
params={[
{key: 'red', label: 'Red'},
{key: 'blue', label: 'Blue'},
{key: 'green', label: 'Green'},
]}
/>

);
`

$3

`tsx
export const TextArea = () => (

renderer="my-textarea"
param="description"
params={{
placeholder: "Description",
label: "Description"
}}
/>

);
`

$3

`tsx
export const Numeric = () => (

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

);
`

$3

`tsx
export const IsoDate = () => (

renderer="my-input"
param="created"
required={true}
formatOutputValue={(date?: Date) => date?.toISOString()}
params={{
placeholder: "Created"
}}
/>

);
`

$3

`tsx
export const DynamicValue = () => {
const ref = useRef();

useEffect(() => {
setTimeout(() => {
ref.current?.setValue(22);
}, 2000);
setTimeout(() => {
console.log(ref.current?.isValid(true));
}, 4000);
}, []);

return (

fieldControllerRef={ref}
renderer="my-input"
param="age"
min={44}
params={{
placeholder: "Age"
}}
/>

)
};
``