connectField(component[, options])

Provides form management related props.

The connectField helper is a component wrapper, that provides various props related to the form management. It also adds the 'Field' suffix to the name of the wrapped component.

The table below lists all of the guaranteed props that will be passed to the wrapped component:

changedboolHas field changed?
disabledboolIs field disabled?
errorobjectField scoped part of validation error.
errorMessagestringField scoped validation error message.
fieldobjectField definition from schema.
fieldsarrayOf(string)Subfields names.
fieldTypefuncField type.
findErrorfunc(name)Request another field error.
findFieldfunc(name)Request another field field.
findValuefunc(name)Request another field value.
idstringField id - given or random.
labelstringField label.
namestringField name.
onChangefunc(value, [name])Change field value.
parentobjectParent field props.
placeholderstringField placeholder.
valueanyField value.

The connectField function accepts two arguments: the first one is a component and the second one is an options object.

The table below lists all available options:

mapPropsfunc(props)Props mapper. Useful for integration with third-party components. For example, you can rename specific props instead of doing mapping by hand in the component.
baseFieldelement (React compponent)Base field class. It's reserved for the future - right now there's no useful usecase.
ensureValuebool<input> helper. In React, <input> can't have undefined or null value and any onChange at once - this option passes 'undefined' as en empty string.
initialValueboolInitial value check. If truthy, then after the first render defaultValue is set as value if no value is provided (undefined).
includeParentboolAdditional parent prop. If truthy, additional parent prop is provided (if any). Useful for nested or complex fields.
includeInChainboolField name chain visibility. If truthy, then every nested field name will be prefixed with parent name.

changedKeys(root, valueA, valueB)

Returns an array of changed keys between valueA and valueB, where root is the root key.

import { changedKeys } from 'uniforms';
const arrayOfChangedKeys = changedKeys(root, valueA, valueB);

Note: For more examples, see changedKeys tests.


Retuns a bridge. (It's rather an internal helper, but it's still exported.)

Use it, if you want to manually create a schema bridge or to test your bridge. It will throw on an unrecognised schema.

import { createSchemaBridge } from 'uniforms';
const bridge = createSchemaBridge(schemaOrBridge);


Registers a custom bridge.

import { createSchemaBridge } from 'uniforms';
createSchemaBridge.register(propA, propB, propC /* ... */);


Removes all uniforms-related props.

import { filterDOMProps } from 'uniforms';
const nonUniformsProps = filterDOMProps(props);

filterDOMProps.register(propA, propB, propC ...)

Registers additional props to be filtered.

If you want to filter additional props, then you have to register it.

import { filterDOMProps } from 'uniforms';
filterDOMProps.register(propA, propB, propC /* ... */);


Returns an array containing already registered props.

import { filterDOMProps } from 'uniforms';
filterDOMProps.register(propA, propB, propC /* ... */);
filterDOMProps.registered; // ['propA', 'propB', ...]

injectName(name, component)

Injects name to all already rendered fields. (It's rather an internal helper, but it's still exported.)

import { injectName } from 'uniforms';
const componentWithInjectedName = injectName(name, component);

joinName([null, ] nameA, nameB, nameC, ...)

Safely joins partial field names. When the first param is null, returns an array. Otherwise, returns a string.

If you create a custom field with subfields, then it's better to use this helper.

import { joinName } from 'uniforms';
const joinedNameArray = joinName(null, nameA, nameB, nameC /* ... */);
const joinedNameString = joinName(nameA, nameB, nameC /* ... */);


A safe null or <noscript/> tag.

In React@0.14 you can't return null from functional component, but in React@15 you should use null.

Basically it's a <noscript /> in @0.14 and null in @15.

import { nothing } from 'uniforms';
const emptyJSX = () => nothing;


Generates random ID, based on given prefix. (It's rather an internal helper, but it's still exported.)

Use it, if you want to have some random but deterministic strings. If no prefix is provided, the 'uniforms' prefix will be applied.

import { randomIds } from 'uniforms';
const predictableRandomIdGenerator = randomIds(prefix);
const predictableRandomIdA = predictableRandomIdGenerator();
const predictableRandomIdB = predictableRandomIdGenerator();