mobx-sentinel/react

Utility hooks and standard bindings for React applications using @mobx-sentinel/form.

Hooks

$3

Automatically resets the form when the component mounts and unmounts. This is useful for cleaning up form state when navigating between pages or showing/hiding form components.

``tsx
import { observer } from "mobx-react-lite";
import { useFormAutoReset } from "@mobx-sentinel/react";

const MyFormComponent = observer(({ model }) => {
const form = Form.get(model);

// Auto-resets form on mount/unmount
useFormAutoReset(form);

return

It's just a wrapper for form.addHandler().

`tsx
import { observer } from "mobx-react-lite";
import { useFormHandler } from "@mobx-sentinel/react";

const MyFormComponent = observer(({ model, onSuccess }) => {
const form = Form.get(model);

// No need to memoize - the hook handles it
useFormHandler(form, "submit", async () => {
await saveToAPI(model);
return true; // Return true to indicate success
});

useFormHandler(form, "didSubmit", () => {
onSuccess(); // This always uses the latest onSuccess callback
});

return

These pre-built bindings are designed for native HTML form elements (, , , ) with accessibility in mind.

All binding methods are called on the form instance and automatically handle:

- Two-way data binding between model and UI
- Change tracking and touched state
- Error state management
- ARIA attributes for accessibility

$3

To use the convenient bindInput(), bindCheckBox(), etc. methods, import the extension:

`tsx
import "@mobx-sentinel/react/dist/extension";
`

This extends the Form class with custom bind methods. Without the extension, you can still use the default bind() method with binding classes:

`tsx
// With extension
form.bindInput("username", config)

// Without extension
form.bind("username", InputBinding, config)
`

$3

Binds text, number, or date input fields. Handles intermediate values during typing and auto-finalizes on blur.

String inputs:
`tsx
import { observer } from "mobx-react-lite";

const MyForm = observer(({ model }) => {
const form = Form.get(model);

return (
type="text"
{...form.bindInput("username", {
getter: () => model.username,
setter: (v) => (model.username = v),
})}
/>
);
});
`

Number inputs:
`tsx
{...form.bindInput("age", {
type: "number", // Optional: auto-detected from valueAs
valueAs: "number",
getter: () => model.age,
setter: (v) => (model.age = v ?? 0),
})}
/>

// Optional number field
{...form.bindInput("score", {
valueAs: "number",
getter: () => model.score,
setter: (v) => (model.score = v), // null when empty
})}
/>
`

Date inputs:
`tsx
{...form.bindInput("birthday", {
type: "date", // Optional: auto-detected from valueAs
valueAs: "date",
// Getter must return formatted string
getter: () => model.birthday.toISOString().split("T")[0],
// Setter receives Date object
setter: (v) => (model.birthday = v ?? new Date(0)),
})}
/>

// Also supports: datetime-local, time, week, month
{...form.bindInput("appointmentTime", {
type: "datetime-local",
valueAs: "date",
getter: () => model.time?.toISOString().slice(0, 16) ?? null,
setter: (v) => (model.time = v),
})}
/>
`

$3

Binds checkbox inputs for boolean values.

`tsx
type="checkbox"
{...form.bindCheckBox("subscribe", {
getter: () => model.subscribe,
setter: (v) => (model.subscribe = v),
})}
/>

// Optional boolean field
type="checkbox"
{...form.bindCheckBox("agreedToTerms", {
getter: () => model.agreedToTerms ?? false,
setter: (v) => (model.agreedToTerms = v),
})}
/>
`

$3

Binds radio button groups. The binding function returns a function that takes the value for each button.

`tsx
enum Role {
ADMIN = "ADMIN",
USER = "USER",
GUEST = "GUEST",
}

const MyForm = observer(({ model }) => {
const form = Form.get(model);
const bindRole = form.bindRadioButton("role", {
getter: () => model.role,
setter: (v) => (model.role = v as Role),
});

return (



{Object.values(Role).map((role) => (




{role}

))}