
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-form-object
Advanced tools
The FormObject component simplifies form state management in React applications.
React Form Object
A library for composing and managing complex forms in React.
The FormObject component is a powerful tool for managing form state in React applications. It provides a simple and intuitive interface for handling form data, validation, and submission. With FormObject, you can easily define complex forms with nested fields and dynamic validation rules. It handles state management internally, reducing boilerplate code and making form development more efficient. Additionally, FormObject integrates seamlessly with Yup for schema-based validation and provides hooks for custom validation logic. Overall, FormObject simplifies the process of building and managing forms in React applications, making it an essential tool for frontend developers.
You can install the package via npm:
npm install react-form-object
Or via yarn:
yarn add react-form-object
To use the FormObject component, import it from react-form-object and use it within your React components. Here's a simple example of how to use the FormObject component:
See the full code here
export const ContactSimpleExample = () => {
const [data, setData] = useState(initContact);
// Method for load options of form
const doOptions = async () => {
await sleep(1000); // Simulate fetching options from a server
return {
status: "ready",
options: {
gender: [
{ value: "", label: `??? ${Date.now()}` },
{ value: "M", label: "Male" },
{ value: "F", label: "Female" },
],
},
};
};
// Method for validate the contact data
// You could use any tool
const doValidate = async (contact) => {
try {
const result = contactSchema.validateSync(contact, { abortEarly: false });
return {
status: "valid",
feedback: {
name: {
type: "valid",
message: "It is valid!!!",
},
},
};
} catch (validationError) {
const feedback = {};
validationError.inner.forEach((error) => {
const path = error.path;
const errorMessage = error.message;
feedback[path] = { type: "invalid", message: errorMessage };
});
return { status: "invalid", feedback };
}
};
// Submit data
const doSubmit = async ({ data }) => {
setData(data);
await sleep(1000); // Simulate submitting data to a server
return {
status: "failed",
message: {
type: "danger",
title: "Invalid Service",
description: "This service is invalid",
},
};
};
// Declare FormObject
return (
<div>
<FormObject
data={data}
doOptions={doOptions}
doSubmit={doSubmit}
doValidate={doValidate}
>
<ContactForm />
</FormObject>
<pre>MAIN:{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
The ContactForm
is abstracted from data information and can be split into smaller parts, as it is reused in other forms.
const ContactForm = () => {
const { data, onSubmit, onReset, onReload, options } = useFormObject();
const enabledGuardian = data.age && data.age < 18;
return (
<FormLayout className={ROOT_STYLE[status]}>
<FormInputText label="Name" name="name" required />
<FormInputText label="Last Name" name="lastname" required />
<FormInputText label="Gender" name="gender" required />
<FormInputText label="Age" name="age" required />
<FormInputText
label="Guardian Name"
name="guardianName"
disabled={!enabledGuardian}
required
/>
<FormInputText
label="Guardian Phone"
name="guardianPhone"
disabled={!enabledGuardian}
required
/>
<FormInputText label="Correo Electrónico" name="email" required />
<FormSelectText
label="Gender"
name="gender"
options={options.gender}
required
/>
<div className="message">
<MessageResponse />
</div>
<div className="actions">
<ButtonGroup>
<Button variant="success" type="button" onClick={onReload}>
Reload
</Button>
<Button variant="danger" type="button" onClick={onReset}>
Reset
</Button>
<Button variant="primary" type="button" onClick={() => onSubmit()}>
Submit
</Button>
<Button
variant="primary"
type="button"
onClick={() => onSubmit(true)}
>
Force Submit
</Button>
</ButtonGroup>
</div>
</FormLayout>
);
};
The FormInputText
component is reused throughout the entire project.
const FormInputText = ({ name, label, ...props }) => {
const { getAttribute, setAttribute, feedback } = useFormObject();
const onChange = (e) => setAttribute(name, e.target.value);
const value = getAttribute(name) || "";
const className = ITEM_STYLE[feedback[name]?.type];
return (
<Form.Group className={name}>
<Form.Label>{label}</Form.Label>
<Form.Control
{...props}
value={value}
onChange={onChange}
className={className}
/>
<Form.Control.Feedback type={feedback[name]?.type}>
{feedback[name]?.message}
</Form.Control.Feedback>
</Form.Group>
);
};
The MessageResponse
component is reused throughout the entire project.
const MessageResponse = () => {
const { status, message } = useFormObject();
return (
message && (
<Alert variant={message.type}>
<b>
{status} - {message.title}:{" "}
</b>{" "}
{message.description}
</Alert>
)
);
};
The FormObject
component accepts the following props:
export type FormObjectProps<T, R> = {
index: number;
pk: string;
name: string;
data: T;
setData: SetData<T>;
defaultData: InitData<T>;
result: R;
setResult: SetData<R>;
defaultResult: InitData<R>;
status: Status;
setStatus: SetData<Status>;
defaultStatus: InitData<Status>;
feedback: Feedback;
setFeedback: SetData<Feedback>;
defaultFeedback: InitData<Feedback>;
message: Message;
setMessage: SetData<Message>;
defaultMessage: InitData<Message>;
options: Options;
setOptions: SetData<Options>;
defaultOptions: InitData<Options>;
doReset: DoReset<T>;
doChange: DoChange<T>;
doNotify: DoNotify<T>;
doSubmit: DoSubmit<T>;
doLoad: DoLoad<T>;
doOptions: DoOptions<T>;
doValidate: DoValidate<T>;
deep: boolean;
children: ReactNode;
wrapper: React.FC<any>;
};
The useFormObject
hook provides access to the following data:
export type FormObjectContextProps<T, R> = {
// Identify
pk: string;
name: string;
index: number;
// Data Handler
data: T;
setData: SetData<T>;
setAttribute: SetAttribute;
getAttribute: GetAttribute;
result: R;
setResult: SetData<R>;
// Status Handler
status: Status;
setStatus: SetStatus;
feedback: Feedback;
setFeedback: SetFeedback;
options: Options;
setOptions: SetOptions;
message: Message;
setMessage: SetMessage;
// Allows Methods
onReset: OnReset;
onSubmit: OnSubmit;
onReload: OnReload;
onNotify: OnNotify;
onValidate: OnValidate;
};
The useFormValue
hook provides access to the functionality for a specified path
, allowing for dynamic management of object data
within forms. This hook partially replaces the data
and setData
methods with value
and setValue
. Additionally, the getAttribute
and setAttribute
methods will affect the base path with the specified path parameter.
The useFormList
hook provides access to the functionality for a specified path
, allowing for dynamic management of array data
within forms. In addition to the functionality provided by useFormValue
, this hook includes methods for manipulating the list
, such as addItem
, removeItem
, removeIndex
, setItem
, and getItem
.
StateValue Hooks
const [
value,
setValue,
getAttribute,
setAttribute,
handler,
] = useFormStateValue = <T, R>(path, _default);
StateValue Hooks
const [
value,
setValue,
getItem,
setItem,
addItem,
removeItem,
handler,
] = useFormStateList = <T, R>(path, _default);
The FormIterator
component is used for managing arrays of complex data within forms.
The useFormIterator
hook provides access to the functionality of the FormIterator
component, allowing for dynamic management of array data within forms.
This package is open-sourced software licensed under the MIT license.
FAQs
The FormObject component simplifies form state management in React applications.
The npm package react-form-object receives a total of 10 weekly downloads. As such, react-form-object popularity was classified as not popular.
We found that react-form-object demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.