### Install All Uniforms Packages (TL;DR) Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/installation.mdx Install the core package, a schema bridge, and a theme package in a single command. This is a convenient shortcut for common installations. ```shell npm install uniforms uniforms-bridge-graphql uniforms-semantic ``` -------------------------------- ### Install Core Uniforms Package Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/installation.mdx Install the core uniforms package using npm. This is the first step before installing any schema bridges or themes. ```shell npm install uniforms ``` -------------------------------- ### ImageField Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Provides an example of the ImageField component. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### Install Dependencies with pnpm Source: https://github.com/vazco/uniforms/blob/master/website/README.md Run this command in the root directory to install project dependencies using pnpm. ```bash pnpm install ``` -------------------------------- ### Install uniforms-unstyled Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-unstyled/README.md Use npm to install the uniforms-unstyled package. ```sh $ npm install uniforms-unstyled ``` -------------------------------- ### Install Zod and Ant Design Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/basic-usage.mdx Install the Zod schema validator and Ant Design UI library. ```sh npm install zod antd ``` -------------------------------- ### Install uniforms-semantic Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-semantic/README.md Install the uniforms-semantic package using npm. This is the first step to using Semantic UI components with Uniforms. ```sh $ npm install uniforms-semantic ``` -------------------------------- ### Install uniforms-bridge-simple-schema-2 Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-bridge-simple-schema-2/README.md Install the package using npm. This is the first step to integrate Simple Schema with uniforms. ```sh $ npm install uniforms-bridge-simple-schema-2 ``` -------------------------------- ### RangeField Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Demonstrates the RangeField, which uses two bound datepickers to manage a `{start, stop}` value object. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### Install uniforms packages Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/tutorials-basic-uniforms-usage.mdx Install the core uniforms package, the JSON schema bridge, and the Semantic UI theme. ```shell npm install uniforms npm install uniforms-bridge-json-schema npm install uniforms-semantic ``` -------------------------------- ### Start Local Development Server Source: https://github.com/vazco/uniforms/blob/master/website/README.md Starts a local development server for the website. Changes are reflected live without server restarts. ```bash pnpm -filter=website run start ``` -------------------------------- ### Install Uniforms Theme Package Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/installation.mdx Install a theme package for your desired UI framework. Replace 'theme' with your chosen theme (e.g., semantic, material, bootstrap3). ```shell npm install uniforms-semantic ``` ```shell npm install uniforms-material ``` ```shell npm install uniforms-bootstrap3 ``` ```shell npm install uniforms-bootstrap4 ``` ```shell npm install uniforms-bootstrap5 ``` ```shell npm install uniforms-antd ``` ```shell npm install uniforms-unstyled ``` -------------------------------- ### Sign Up Form Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-common-forms.mdx Demonstrates a sign-up form component. Requires the SignUp component and its associated schema. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### Install uniforms-bridge-json-schema Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-bridge-json-schema/README.md Install the package using npm. This is the first step to integrate JSON Schema with uniforms. ```sh $ npm install uniforms-bridge-json-schema ``` -------------------------------- ### SimpleSchema Form Layout Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/examples/form-layout.mdx Use SimpleSchema2Bridge for forms with SimpleSchema schemas. This example demonstrates basic form setup with SimpleSchema. ```typescript import { AutoForm, AutoField, AutoFields, ErrorsField, SubmitField, } from 'uniforms-antd'; import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2'; import SimpleSchema from 'simpl-schema'; const userSchema = new SimpleSchema({ firstName: String, lastName: String, username: String, email: String, }); const schema = new SimpleSchema2Bridge({ schema: userSchema }); export default function App() { return ( window.alert(JSON.stringify(model))} >
); } ``` -------------------------------- ### Install uniforms-bridge-zod Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-bridge-zod/README.md Install the Zod bridge for Uniforms using npm. ```sh $ npm install uniforms-bridge-zod ``` -------------------------------- ### Install Uniforms Packages Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/basic-usage.mdx Install the core uniforms packages along with the Zod bridge and Ant Design theme. ```sh npm install uniforms uniforms-bridge-zod uniforms-antd ``` -------------------------------- ### Install uniforms-bootstrap4 Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-bootstrap4/README.md Install the uniforms-bootstrap4 package using npm. This command adds the necessary library to your project dependencies. ```sh $ npm install uniforms-bootstrap4 ``` -------------------------------- ### Install uniforms-mui Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-mui/README.md Install the uniforms-mui package using npm. This command adds the necessary Material-UI components for uniforms to your project. ```sh npm install uniforms-mui ``` -------------------------------- ### Install Uniforms Schema Bridge Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/installation.mdx Install a schema bridge package for your chosen schema type. Replace 'bridge' with your specific schema (e.g., graphql, json-schema, simple-schema). ```shell npm install uniforms-bridge-graphql ``` ```shell npm install uniforms-bridge-json-schema ``` ```shell npm install uniforms-bridge-simple-schema ``` ```shell npm install uniforms-bridge-simple-schema-2 ``` -------------------------------- ### Install uniforms-bootstrap5 Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-bootstrap5/README.md Install the uniforms-bootstrap5 package using npm. This command adds the necessary UI components for Bootstrap 5 integration. ```sh $ npm install uniforms-bootstrap5 ``` -------------------------------- ### Install uniforms-antd Source: https://github.com/vazco/uniforms/blob/master/packages/uniforms-antd/README.md Install the uniforms-antd package using npm. This command adds the necessary Ant Design components to your project for use with uniforms. ```sh $ npm install uniforms-antd ``` -------------------------------- ### AutoForm onChangeModel Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-forms.md Demonstrates how to use the `onChangeModel` prop with AutoForm to log the entire form model whenever it changes. ```tsx import { AutoForm } from 'uniforms'; // Or from the theme package. console.log(model)} />; ``` -------------------------------- ### CompositeField Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Demonstrates the use of CompositeField, a shortcut for multiple fields with access to field props for extra logic. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### CycleField Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Shows the CycleField, which iterates through allowed values and an optional no-value state for non-required fields. This example uses Semantic-UI. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### SwapField Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Demonstrates the SwapField, which allows swapping the values of two fields by clicking a child element, typically a refresh icon. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### Install Uniforms Unstyled Theme Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the Unstyled theme for Uniforms if you plan to manage all styling yourself or integrate with a custom CSS solution. This provides the core logic without predefined styles. ```sh npm install uniforms-unstyled ``` -------------------------------- ### RatingField Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Shows the RatingField, which renders stars to represent a rating, filling them based on the current value. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### Install Uniforms Semantic UI Theme Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the Semantic UI theme for Uniforms to apply Semantic UI styling to your forms. Ensure Semantic UI's CSS is included in your project. ```sh npm install uniforms-semantic ``` -------------------------------- ### Install Uniforms SimpleSchema (v2) Bridge Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the SimpleSchema v2 bridge for Uniforms. This is used when integrating with projects that utilize SimpleSchema version 2 for data validation. ```sh npm install uniforms-bridge-simple-schema-2 ``` -------------------------------- ### AutoFields Usage Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-fields.md Shows how to use AutoFields to render multiple fields with custom configurations. The 'element' prop defines the wrapper component for the fields. ```tsx import { AutoFields } from 'uniforms-unstyled'; ; ``` -------------------------------- ### DisplayIf Field Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Illustrates the DisplayIf field, a simple component that conditionally renders other fields based on user input. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### Uniforms TextField Props Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/api-reference/fields.mdx Demonstrates the usage of various props available for the `TextField` component in Uniforms, including styling, icons, and layout configurations. Note that `labelClassName` can accept either a single string or an array of strings. ```tsx import { TextField } from 'uniforms-unstyled'; import { useRef } from 'react' const inputRef = useRef(); ; ``` -------------------------------- ### NumField Props Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/api-reference/fields.mdx Example of how to use the NumField component with various props. ```APIDOC ## NumField Usage ### Description Provides a numeric input field with various customization options. ### Props - `decimal` (boolean) - Enables decimal input. - `extra` (string) - Additional feedback or help text. - `help` (string) - Help text displayed to the user. - `helpClassName` (string | string[]) - CSS class names for the help text. - `icon` (string) - Icon to display (e.g., 'user'). - `iconLeft` (string) - Icon to display on the left. - `iconProps` (object) - Props for the icon, e.g., `{ onClick() {} }`. - `inputClassName` (string | string[]) - CSS class names for the input element. - `inputRef` (Ref) - A ref to the input element. - `labelClassName` (string | string[]) - CSS class names for the label. - `labelCol` (object) - Layout configuration for the label (e.g., `{ offset: 2 }`, `{ span: 4 }`). - `max` (number) - Maximum allowed value. - `min` (number) - Minimum allowed value. - `showInlineError` (boolean) - Displays inline error messages. - `step` (number) - The step value for numeric input. - `wrapClassName` (string | string[]) - CSS class names for the wrapper element. - `wrapperCol` (object) - Layout configuration for the input wrapper (e.g., `{ offset: 2 }`, `{ span: 4 }`). ### Example Usage ```tsx import { NumField } from 'uniforms-unstyled'; import { useRef } from 'react' const inputRef = useRef(); ; ``` ``` -------------------------------- ### Customizing AutoField with Fallback Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/uth-autofield-algorithm.md This example demonstrates how to provide a custom component detector to `AutoField.componentDetectorContext.Provider` while ensuring a fallback to the default algorithm for unhandled cases. ```tsx { if (props.useSpecialField) { return SpecialField; } return AutoField.defaultComponentDetector(props, uniforms); }} > ``` -------------------------------- ### Install Uniforms JSON Schema Bridge Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the JSON Schema bridge for Uniforms to enable schema validation using JSON Schema. Use this when your data structure is defined by a JSON Schema. ```sh npm install uniforms-bridge-json-schema ``` -------------------------------- ### AutoField Usage Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-fields.md Demonstrates how to use AutoField with a custom component. All additional props are passed to the result field component. ```tsx import { AutoField } from 'uniforms-unstyled'; ; ``` -------------------------------- ### Handle onSubmit Results Asynchronously Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/migrating-2-to-3.md Synchronous returns and throws in `onSubmit` are no longer allowed. All results or errors must be returned via a `Promise`. This example shows how to integrate success and failure callbacks into the new `onSubmit` handler. ```diff -onSubmit={onSubmit} -onSubmitSuccess={onSubmitSuccess} -onSubmitFailure={onSubmitFailure} +onSubmit={model => { + const result = onSubmit(model); + result.then(onSubmitSuccess, onSubmitFailure); + return result; + }} ``` -------------------------------- ### Basic Usage with JSON Schema Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/examples/basic-usage.mdx Integrates Uniforms with JSON Schema for validation. This example uses a separate validator file and schema definition. ```typescript import { AutoForm } from 'uniforms-antd'; import { schema } from './userSchema'; export default function App() { return ( window.alert(JSON.stringify(model))} /> ); } ``` ```typescript import { JSONSchemaBridge } from 'uniforms-bridge-json-schema'; import { JSONSchemaType } from 'ajv' import { createValidator } from './validator'; type FormData = { username: string; }; const userSchema: JSONSchemaType = { type: 'object', properties: { username: { type: 'string' }, }, required: ['username'], }; export const schema = new JSONSchemaBridge({ schema: userSchema, validator: createValidator(userSchema), }); ``` ```typescript export const ajvValidatorFile = `import { createValidator } from 'uniforms-bridge-json-schema'; export const createValidator = (schema) => createValidator(schema); `; ``` -------------------------------- ### Create Schema Bridge with SimpleSchema2Bridge Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/migrating-2-to-3.md In v3, `createSchemaBridge` is removed. You must now manually create bridge instances. This example shows how to create a `SimpleSchema2Bridge` instance. ```diff import { SimpleSchema } from 'simpl-schema'; + import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2'; const schema = new SimpleSchema({ /* ... */ }); - + const bridge = new SimpleSchema2Bridge(schema); + ``` -------------------------------- ### Create Reusable Form Enhancements with Higher-Order Components Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-forms.md Use a higher-order component pattern to create reusable form enhancements that modify the onChange behavior. This example demonstrates how to create a form that multiplies one field's value into another. ```tsx const withMultipliedField = (fieldA, fieldB, Form) => class withMultipliedFieldForm extends Form { onChange(key, value) { // Multiply fieldA if (key === fieldA) super.onChange(fieldB, value + value); // Pass every change super.onChange(key, value); } }; ``` -------------------------------- ### Uniforms Field Props Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/api-reference/fields.mdx Demonstrates the usage of various props for a Uniforms LongTextField, including extra feedback, help text, icon configurations, class names, refs, and layout options. Supports both string and array inputs for class names, and object inputs for layout configurations. ```tsx import { LongTextField } from 'uniforms-unstyled'; import { useRef } from 'react' const inputRef = useRef(); ; ``` -------------------------------- ### Multi-step Form with Simple Schema Bridge Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/examples/multi-step-form.mdx Implement a multi-step form using Simple Schema for validation. This example includes the main App component and separate UserForm and ProfileForm components, each defined with a Simple Schema and its corresponding Uniforms bridge. ```typescript import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2'; import SimpleSchema from 'simpl-schema'; import { AutoForm } from 'uniforms-antd'; const userSchema = new SimpleSchema({ username: String, password: { type: String, uniforms: { type: 'password' } }, }); const schema = new SimpleSchema2Bridge({ schema: userSchema }); type UserFormProps = { onSubmit: (model: any) => void; }; export function UserForm(props: UserFormProps) { const { onSubmit } = props; return ; ``` ```typescript import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2'; import SimpleSchema from 'simpl-schema'; import { AutoForm } from 'uniforms-antd'; const profileSchema = new SimpleSchema({ firstName: String, lastName: String, }); const schema = new SimpleSchema2Bridge({ schema: profileSchema }); type ProfileFormProps = { onSubmit: (model: any) => void; }; export function ProfileForm(props: ProfileFormProps) { const { onSubmit } = props; return ; ``` -------------------------------- ### Install Uniforms Ant Design Theme Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the Ant Design theme for Uniforms to apply AntD styling to your forms. Ensure you have AntD installed and its styles included in your project. ```sh npm install uniforms-antd ``` -------------------------------- ### Build Static Website Content Source: https://github.com/vazco/uniforms/blob/master/website/README.md Generates static content into the 'build' directory, ready for hosting on any static content service. ```bash pnpm -filter=website run build ``` -------------------------------- ### Form Instance Methods (via useForm hook) Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-forms.md Demonstrates how to access form instance methods using the `useForm` hook and the `formRef` context property. ```APIDOC ## Form Instance Methods (via useForm hook) ### Description Access form instance methods like `reset` and `submit` within child components using the `useForm` hook and the `formRef` property from the context. ### Usage ```tsx function FormControls() { const { formRef } = useForm(); return ( <> ); } function App() { return ( ); } ``` ``` -------------------------------- ### Form Instance Methods (via ref) Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-forms.md Explains how to access and use form instance methods like `reset`, `change`, and `submit` using a React ref. ```APIDOC ## Form Instance Methods (via ref) ### Description Access form instance methods programmatically by attaching a ref to the form component. This allows for manual control over form actions. ### Usage ```tsx const MyForm = ({ schema, onSubmit }) => { let formRef; return (
(formRef = ref)} schema={schema} onSubmit={onSubmit} /> formRef.reset()}>Reset formRef.submit()}>Submit
); }; ``` ### Available Methods - **`change(key, value)`**: Triggers a form change programmatically, equivalent to a change event. - **`reset()`**: Resets the form's state, including changed values, model, and validation status, then rerenders. - **`submit()`**: Submits the form programmatically. Returns a Promise that resolves with the submitted model or rejects with a validation error (in `ValidatedForm`). ``` -------------------------------- ### Install Uniforms Zod Bridge Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the Zod bridge for Uniforms. This is recommended for projects using Zod for schema definition and validation. ```sh npm install uniforms-bridge-zod ``` -------------------------------- ### Deploy Website using SSH Source: https://github.com/vazco/uniforms/blob/master/website/README.md Deploys the website using SSH. This command builds the site and pushes it to the 'gh-pages' branch. ```bash USE_SSH=true yarn deploy ``` -------------------------------- ### Install Uniforms Bootstrap 5 Theme Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the Bootstrap 5 theme for Uniforms to style your forms with Bootstrap 5. Ensure Bootstrap 5 CSS is properly linked in your application. ```sh npm install uniforms-bootstrap5 ``` -------------------------------- ### Install Uniforms Bootstrap 4 Theme Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/getting-started/installation.mdx Install the Bootstrap 4 theme for Uniforms to style your forms with Bootstrap 4. Make sure Bootstrap 4 CSS is included in your project. ```sh npm install uniforms-bootstrap4 ``` -------------------------------- ### SimpleSchema with Uniforms Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/examples/field-props.mdx Illustrates using SimpleSchema with Uniforms, defining an enum-like field with allowed values and rendering it as checkboxes. ```tsx import { AutoForm, AutoField, ErrorsField, SubmitField } from 'uniforms-antd'; import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2'; import SimpleSchema from 'simpl-schema'; enum Role { Member = 'Member', Staff = 'Staff', } const userSchema = new SimpleSchema({ username: String, password: String, role: { type: String, allowedValues: [Role.Member, Role.Staff], }, }); const schema = new SimpleSchema2Bridge({ schema: userSchema }); export default function App() { return ( window.alert(JSON.stringify(model))} > ); } ``` -------------------------------- ### SubmitButton Example Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/examples-custom-fields.mdx Illustrates a simplified SubmitField that disables the button when the form is invalid. It uses a schema for validation. ```javascript import { ExampleCustomizer } from '../../src/components/ExampleCustomizer'; ``` -------------------------------- ### Deploy Website without SSH Source: https://github.com/vazco/uniforms/blob/master/website/README.md Deploys the website without using SSH. Replace '' with your actual GitHub username. ```bash GIT_USER= yarn deploy ``` -------------------------------- ### JSON Schema with Uniforms Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/examples/field-props.mdx Sets up a form using JSON Schema and Uniforms. Includes defining the schema in a separate file and creating a validator using ajv. ```tsx import { AutoForm, AutoField, ErrorsField, SubmitField } from 'uniforms-antd'; import { schema } from './userSchema'; export default function App() { return ( window.alert(JSON.stringify(model))} > ); } ``` ```ts import { JSONSchemaBridge } from 'uniforms-bridge-json-schema'; import { JSONSchemaType } from 'ajv'; import { createValidator } from './validator'; enum Role { Member = 'Member', Staff = 'Staff', } type FormData = { username: string; password: string; role: Role; }; const userSchema: JSONSchemaType = { type: 'object', properties: { username: { type: 'string' }, password: { type: 'string' }, role: { type: 'string', enum: [Role.Member, Role.Staff], }, }, required: ['username', 'password', 'role'], }; export const schema = new JSONSchemaBridge({ schema: userSchema, validator: createValidator(userSchema), }); ``` ```ts import Ajv from 'ajv'; export function createValidator(schema: object) { const ajv = new Ajv({ allErrors: true }); return ajv.compile(schema); } ``` -------------------------------- ### `useForm` Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-helpers.md Provides direct access to the form context data, allowing you to retrieve state and methods related to the form. ```APIDOC ## `useForm` A direct way of accessing the [context data](/docs/3.0/api-context-data/#state): ```tsx import { useForm } from 'uniforms'; function Example() { const context = useForm(); } ``` ``` -------------------------------- ### BaseForm Props Configuration Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-3.0/api-forms.md Demonstrates various props for configuring BaseForm, including autosave, error handling, grid layouts, model transformations, event handlers, and programmatic access via ref. ```tsx import { BaseForm } from 'uniforms'; // Or from the theme package. { // This model will be passed to the fields. if (mode === 'form') { /* ... */ } // This model will be submitted. if (mode === 'submit') { /* ... */ } // This model will be validated. if (mode === 'validate') { /* ... */ } // Otherwise, return unaltered model. return model; }} onChange={(key, value) => console.log(key, value)} onSubmit={model => db.saveThatReturnsPromiseOrNothing(model)} placeholder={false} readOnly={false} schema={myFormSchema} showInlineError ref={form => { // Reset form. // It will reset changed state, model state in AutoForm, validation // state in ValidatedForm and rerender. form.reset(); // Trigger form change. // It's a programmatic equivalent of a change event. form.change(key, value); // Submit form. // It's a programmatic equivalent of a submit event. Returns a promise, // which will either resolve with submitted form or reject with // validation error in ValidatedForm. form.submit(); }} />; ``` -------------------------------- ### Zod Schema Form Layout Source: https://github.com/vazco/uniforms/blob/master/website/versioned_docs/version-4.0/examples/form-layout.mdx Use ZodBridge for forms with Zod schemas. This example shows arranging fields in a row and displaying all fields. ```typescript import { AutoForm, AutoField, AutoFields, ErrorsField, SubmitField, } from 'uniforms-antd'; import { ZodBridge } from 'uniforms-bridge-zod'; import { z } from 'zod'; const userSchema = z.object({ firstName: z.string(), lastName: z.string(), username: z.string(), email: z.string().email(), }); const schema = new ZodBridge({ schema: userSchema }); export default function App() { return ( window.alert(JSON.stringify(model))} >
); } ```