1.0.20 • Published 6 months ago
@sparkui/react-field v1.0.20
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
Field<ValueType, ElementType, NativeElementType, CustomPropsType>
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<ValueType, ElementType>) => 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
<Form.Field<string, HTMLInputElement> 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
}) => (
<>
<input
className="form-control"
placeholder="Name"
type="text"
ref={ref}
value={value}
onChange={({target: {value}}) => onChange(value)}
onBlur={({target: {value}}) => onBlur(value)}
/>
{errors.length > 0 && <span className="alert alert-danger my-2">Validation failed {errors}</span>}
</>
)}
</Form.Field>
Instances
- TextField
- EmailField
- PasswordField
- NumericField
- DateField
- SelectField
- CheckBoxField
- RadioField
- FilesField
Text Field
export const Text = () => (
<Theme>
<TextField
renderer="my-input"
param="name"
params={{
placeholder: "Name"
}}
/>
</Theme>
);
CheckBox Field
export const CheckBox = () => (
<Theme>
<CheckBoxField
renderer="my-checkbox"
param="new"
params={{
input: {placeholder: "New"},
label: "New"
}}
/>
</Theme>
);
Password Field
export const Password = () => (
<Theme>
<PasswordField
renderer="my-input"
param="secret"
pattern={/^[0-9\-+\/?]+$/}
params={{
placeholder: "Secret"
}}
/>
</Theme>
);
Radio Field
export const RadioSet = () => (
<Theme>
<RadioField
renderer="my-radio-set"
param="color"
params={[
{key: 'red', label: 'Red'},
{key: 'blue', label: 'Blue'},
{key: 'green', label: 'Green'},
]}
/>
</Theme>
);
Text Area Field
export const TextArea = () => (
<Theme>
<TextAreaField
renderer="my-textarea"
param="description"
params={{
placeholder: "Description",
label: "Description"
}}
/>
</Theme>
);
Numeric Field
export const Numeric = () => (
<Theme>
<NumericField
renderer="my-input"
param="age"
params={{
placeholder: "Age"
}}
/>
</Theme>
);
Date Field
export const IsoDate = () => (
<Theme>
<DateField
renderer="my-input"
param="created"
required={true}
formatOutputValue={(date?: Date) => date?.toISOString()}
params={{
placeholder: "Created"
}}
/>
</Theme>
);
Dynamic Field
export const DynamicValue = () => {
const ref = useRef<FieldController>();
useEffect(() => {
setTimeout(() => {
ref.current?.setValue(22);
}, 2000);
setTimeout(() => {
console.log(ref.current?.isValid(true));
}, 4000);
}, []);
return (
<Theme>
<NumericField
fieldControllerRef={ref}
renderer="my-input"
param="age"
min={44}
params={{
placeholder: "Age"
}}
/>
</Theme>
)
};
1.0.20
6 months ago
1.0.19
6 months ago
1.0.18
6 months ago
1.0.17
6 months ago
1.0.16
6 months ago
1.0.15
6 months ago
1.0.14
6 months ago
1.0.13
6 months ago
1.0.12
6 months ago
1.0.11
9 months ago
1.0.10
10 months ago
1.0.9
10 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.5
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.2
10 months ago
1.0.1
10 months ago