RJSF utility functions, constants and types
In version 5, the utility functions from @rjsf/core/utils
were refactored into their own library called @rjsf/utils
.
These utility functions are separated into two distinct groups.
The first, larger, group are the functions that do NOT require a ValidatorType
interface be provided as one of their parameters.
The second, smaller, group are the functions that DO require a ValidatorType
interface be provided as a parameter.
There is also a helper function used to create a SchemaUtilsType
implementation from a ValidatorType
implementation and rootSchema
object.
Constants
The @rjsf/utils
package exports a set of constants that represent all the keys into various elements of a RJSFSchema or UiSchema that are used by the various utility functions.
In addition to those keys, there is the special ADDITIONAL_PROPERTY_FLAG
flag that is added to a schema under certain conditions by the retrieveSchema()
utility.
These constants can be found on GitHub here.
Types
Additionally, the Typescript types used by the utility functions represent nearly all the types used by RJSF.
Those types are exported for use by @rjsf/core
and all the themes, as well as any customizations you may build.
These types can be found on GitHub here.
Enums
There are enumerations in @rjsf/utils
that are exported for use by @rjsf/core
and all the themes, as well as any customizations you may build.
These enums can be found on GitHub here.
Non-Validator utility functions
allowAdditionalItems()
Checks the schema to see if it is allowing additional items, by verifying that schema.additionalItems
is an object.
The user is warned in the console if schema.additionalItems
has the value true
.
Parameters
- schema: S - The schema object to check
Returns
- boolean: True if additional items is allowed, otherwise false
ariaDescribedByIds<T = any>()
Return a list of element ids that contain additional information about the field that can be used to as the aria description of the field.
Parameters
- id: IdSchema<T> | string - Either simple string id or an IdSchema from which to extract it
- [includeExamples=false]: boolean - Optional flag, if true, will add the
examplesId
into the list
Returns
- string: The string containing the list of ids for use in an
aria-describedBy
attribute
asNumber()
Attempts to convert the string into a number. If an empty string is provided, then undefined
is returned.
If a null
is provided, it is returned.
If the string ends in a .
then the string is returned because the user may be in the middle of typing a float number.
If a number ends in a pattern like .0
, .20
, .030
, string is returned because the user may be typing number that will end in a non-zero digit.
Otherwise, the string is wrapped by Number()
and if that result is not NaN
, that number will be returned, otherwise the string value
will be.
Parameters
- value: string | null - The string or null value to convert to a number
Returns
- undefined | null | string | number: The
value
converted to a number when appropriate, otherwise thevalue
buttonId<T = any>()
Return a consistent id
for the btn
button element
Parameters
- id: IdSchema<T> | string - Either simple string id or an IdSchema from which to extract it
- btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove' - The button type for which to generate the id
Returns
- string: The consistent id for the button from the given
id
andbtn
type
canExpand<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()
Checks whether the field described by schema
, having the uiSchema
and formData
supports expanding.
The UI for the field can expand if it has additional properties, is not forced as non-expandable by the uiSchema
and the formData
object doesn't already have schema.maxProperties
elements.
Parameters
- schema: S - The schema for the field that is being checked
- [uiSchema={}]: UiSchema<T, S, F> - The uiSchema for the field
- [formData]: T | undefined - The formData for the field
Returns
- boolean: True if the schema element has additionalProperties or patternProperties keywords, is expandable, and not at the maxProperties limit
createErrorHandler<T = any>()
Given a formData
object, recursively creates a FormValidation
error handling structure around it
Parameters
- formData: T - The form data around which the error handler is created
Returns
- FormValidation<T>: A
FormValidation
object based on theformData
structure
dataURItoBlob()
Given the FileReader.readAsDataURL()
based dataURI
extracts that data into an actual Blob along with the name
of that Blob if provided in the URL. If no name is provided, then the name falls back to unknown
.
Parameters
- dataURI: string - The
DataUrl
potentially containing name and raw data to be converted to a Blob
Returns
- { blob: Blob, name: string }: An object containing a Blob and its name, extracted from the URI
dateRangeOptions<S extends StrictRJSFSchema = RJSFSchema>()
Returns a list of options for a date range between start
and stop
.
If the start date is greater than the end date, then the date range is reversed.
If start
and stop
are negative numbers (or zero), then they will be treated as relative to the current year.
Parameters
- start: number - The starting point of the date range
- stop: number - The ending point of the date range
Returns
- EnumOptionsType<S>[]: The list of EnumOptionsType for the date range between
start
andstop
Throws
- Error when
start
andstop
aren't both %lt;= 0 or > 0
deepEquals()
Implements a deep equals using the lodash.isEqualWith
function, that provides a customized comparator that assumes all functions are equivalent.
Parameters
- a: any - The first element to compare
- b: any - The second element to compare
Returns
- boolean: True if the
a
andb
are deeply equal, false otherwise
descriptionId<T = any>()
Return a consistent id
for the field description element.
Parameters
- id: IdSchema<T> | string - Either simple string id or an IdSchema from which to extract it
Returns
- string: The consistent id for the field description element from the given
id
englishStringTranslator()
Translates a TranslatableString
value stringToTranslate
into english.
When a params
array is provided, each value in the array is used to replace any of the replaceable parameters in the stringToTranslate
using the %1
, %2
, etc. replacement specifiers.
Parameters
stringToTranslate: TranslatableString - The TranslatableString
value to convert to english
[params]: string[] - The optional list of replaceable parameter values to substitute to the english string
Returns
- string: The
stringToTranslate
itself with any replaceable parameter values substituted
enumOptionsDeselectValue<S extends StrictRJSFSchema = RJSFSchema>()
Removes the enum option value at the valueIndex
from the currently selected
(list of) value(s).
If selected
is a list, then that list is updated to remove the enum option value with the valueIndex
in allEnumOptions
.
If it is a single value, then if the enum option value with the valueIndex
in allEnumOptions
matches selected
, undefined is returned, otherwise the selected
value is returned.
Parameters
- valueIndex: string | number - The index of the value to be removed from the selected list or single value
- [selected]: EnumOptionsType<S>["value"] | EnumOptionsType<S>["value"][] | undefined - The current (list of) selected value(s)
- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions
Returns
- EnumOptionsType<S>["value"][]: The updated
selected
list with thevalue
removed from it
enumOptionsIndexForValue<S extends StrictRJSFSchema = RJSFSchema>()
Returns the index(es) of the options in allEnumOptions
whose value(s) match the ones in value
.
All the enumOptions
are filtered based on whether they are a "selected" value
and the index of each selected one is then stored in an array.
If multiple
is true, that array is returned, otherwise the first element in the array is returned.
Parameters
- value: EnumOptionsType<S>["value"] | EnumOptionsType<S>["value"][] - The single value or list of values for which indexes are desired
- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions
- [multiple=false]: boolean - Optional flag, if true will return a list of index, otherwise a single one
Returns
- string | string[] | undefined: A single string index for the first
value
inallEnumOptions
, if notmultiple
. Otherwise, the list of indexes for (each of) the value(s) invalue
.
enumOptionsIsSelected<S extends StrictRJSFSchema = RJSFSchema>()
Determines whether the given value
is (one of) the selected
value(s).
Parameters
- value: EnumOptionsType<S>["value"] - The value being checked to see if it is selected
- selected: EnumOptionsType<S>["value"] | EnumOptionsType<S>["value"][] - The current selected value or list of values
- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions
Returns
- boolean: true if the
value
is one of theselected
ones, false otherwise
enumOptionsSelectValue<S extends StrictRJSFSchema = RJSFSchema>()
Add the value
to the list of selected
values in the proper order as defined by allEnumOptions
.
Parameters
- valueIndex: string | number - The index of the value that should be selected
- selected: EnumOptionsType<S>["value"][] - The current list of selected values
- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions
Returns
- EnumOptionsType<S>["value"][]: The updated list of selected enum values with
value
added to it in the proper location
enumOptionsValueForIndex<S extends StrictRJSFSchema = RJSFSchema>()
Returns the value(s) from allEnumOptions
at the index(es) provided by valueIndex
.
If valueIndex
is not an array AND the index is not valid for allEnumOptions
, emptyValue
is returned.
If valueIndex
is an array, AND it contains an invalid index, the returned array will have the resulting undefined values filtered out, leaving only valid values or in the worst case, an empty array.
Parameters
- valueIndex: string | number | Array<string | number> - The index(es) of the value(s) that should be returned
- [allEnumOptions=[]]: EnumOptionsType<S>[] - The list of all the known enumOptions
- [emptyValue]: EnumOptionsType<S>["value"] | undefined - The value to return when the non-array
valueIndex
does not refer to a real option
Returns
- EnumOptionsType<S>["value"] | EnumOptionsType<S>["value"][] | undefined: The single or list of values specified by the single or list of indexes if they are valid. Otherwise,
emptyValue
or an empty list.
errorId<T = any>()
Return a consistent id
for the field error element.
Parameters
- id: IdSchema<T> | string - Either simple string id or an IdSchema from which to extract it
Returns
- string: The consistent id for the field error element from the given
id
examplesId<T = any>()
Return a consistent id
for the field examples element.
Parameters
- id: IdSchema<T> | string - Either simple string id or an IdSchema from which to extract it
Returns
- string: The consistent id for the field examples element from the given
id
findSchemaDefinition<S extends StrictRJSFSchema = RJSFSchema>()
Given the name of a $ref
from within a schema, using the rootSchema
, look up and return the sub-schema using the path provided by that reference.
If #
is not the first character of the reference, or the path does not exist in the schema, then throw an Error.
Otherwise, return the sub-schema. Also deals with nested $ref
s in the sub-schema.
Parameters
- $ref: string - The ref string for which the schema definition is desired
- [rootSchema=]: S - The root schema in which to search for the definition
Returns
- S: The sub-schema within the
rootSchema
which matches the$ref
if it exists
Throws
- Error indicating that no schema for that reference exists
getChangedFields(a: unknown, b: unknown)
Compares two objects and returns the names of the fields that have changed.
This function iterates over each field of object a
, using _.isEqual
to compare the field value with the corresponding field value in object b
.
If the values are different, the field name will be included in the returned array.
Parameters
- a: unknown - The first object, representing the original data to compare.
- b: unknown - The second object, representing the updated data to compare.
Returns
- string[] : An array of field names that have changed.
Example
const a = { name: 'John', age: 30 };
const b = { name: 'John', age: 31 };
const changedFields = getChangedFields(a, b);
console.log(changedFields); // Output: ['age']
getDiscriminatorFieldFromSchema<S extends StrictRJSFSchema = RJSFSchema>()
Returns the discriminator.propertyName
when defined in the schema
if it is a string. A warning is generated when it is not a string.
Returns undefined
when a valid discriminator is not present.
Parameters
- schema: S - The schema from which the discriminator is potentially obtained
Returns
- string | undefined: The
discriminator.propertyName
if it exists in the schema, otherwiseundefined
getDateElementProps()
Given date & time information with optional yearRange & format, returns props for DateElement
Parameters
- date: DateObject - Object containing date with optional time information
- time: boolean - Determines whether to include time or not
- [yearRange=[1900, new Date().getFullYear() + 2]]: [number, number] - Controls the list of years to be displayed
- [format='YMD']: DateElementFormat - Controls the order in which day, month and year input element will be displayed
Returns
- Array of props for DateElement
getInputProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()
Using the schema
, defaultType
and options
, extract out the props for the <input>
element that make sense.
Parameters
- schema: S - The schema for the field provided by the widget
- [defaultType]: string | undefined - The default type, if any, for the field provided by the widget
- [options=]: UIOptionsType<T, S, F> - The UI Options for the field provided by the widget
- [autoDefaultStepAny=true]: boolean - Determines whether to auto-default step=any when the type is number and no step
Returns
- InputPropsType: The extracted
InputPropsType
object
getOptionMatchingSimpleDiscriminator()
Compares the value of discriminatorField
within formData
against the value of discriminatorField
within schema for each option
. Returns index of first option
whose discriminator matches formData. Returns undefined
if there is no match.
This function does not work with discriminators of "type": "object"
and "type": "array"
Parameters
- [formData]: T | undefined - The current formData, if any, used to figure out a match
- options: S[] - The list of options to find a matching options from
- [discriminatorField]: string | undefined - The optional name of the field within the options object whose value is used to determine which option is selected
Returns
- number | undefined: index of the matched option
getSchemaType()
Gets the type of a given schema
.
If the type is not explicitly defined, then an attempt is made to infer it from other elements of the schema as follows:
- schema.const: Returns the
guessType()
of that value - schema.enum: Returns
string
- schema.properties: Returns
object
- schema.additionalProperties: Returns
object
- schema.patternProperties: Returns
object
- type is an array with a length of 2 and one type is 'null': Returns the other type
Parameters
- schema: S - The schema for which to get the type
Returns
- string | string[] | undefined: The type of the schema
getSubmitButtonOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()
Extracts any ui:submitButtonOptions
from the uiSchema
and merges them onto the DEFAULT_OPTIONS
Parameters
- [uiSchema=]: UiSchema<T, S, F> - the UI Schema from which to extract submit button props
Returns
- UISchemaSubmitButtonOptions: The merging of the
DEFAULT_OPTIONS
with any custom ones
getTemplate<Name extends keyof TemplatesType<T, S, F>, T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()
Returns the template with the given name
from either the uiSchema
if it is defined or from the registry
otherwise. NOTE, since ButtonTemplates
are not overridden in uiSchema
only those in the registry
are returned.
Parameters
- name: Name - The name of the template to fetch, restricted to the keys of
TemplatesType
- registry: Registry<T, S, F> - The
Registry
from which to read the template - [uiOptions={}]: UIOptionsType<T, S, F> - The
UIOptionsType
from which to read an alternate template
Returns
- TemplatesType<T, S, F>[Name] - The template from either the
uiSchema
orregistry
for thename
getTestIds()
Returns an object of test IDs that can only be used in test mode.
If the function is called in a test environment (NODE_ENV === 'test'
, this is set by jest) then a Proxy object will be returned.
If a key within the returned object is accessed, if the value already exists the object will return that value, otherwise it will create that key
with a generated uuid
value and return the generated ID.
If it is called outside of a test environment, the function will return an empty object, therefore returning undefined
for any property within the object and excluding the prop from the rendered output of the component in which it is used.
To use this helper, you will want to generate a separate object for each component to avoid potential overlapping of ID names.
You will also want to export the object for use in tests, because the keys will be generated in the component file, and used in the test file.
Within the component file, add: export const TEST_IDS = getTestIds();
Then pass TEST_IDS.examplePropertyName
as the value of the test ID attribute of the intended component.
This will allow you to use TEST_IDS.examplePropertyName
within your tests, while keeping the test IDs out of your rendered output.
Returns
- TestIdShape: An object that auto-generates test ids upon request the first time and then returns the same value on subsequent calls
getUiOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()
Get all passed options from ui:options, and ui:<optionName>, returning them in an object with the ui:
stripped off.
Any globalOptions
will always be returned, unless they are overridden by options in the uiSchema
.
Parameters
- [uiSchema=]: UiSchema<T, S, F> - The UI Schema from which to get any
ui:xxx
options - [globalOptions=]: GlobalUISchemaOptions - The optional Global UI Schema from which to get any fallback
xxx
options
Returns
- UIOptionsType<T, S, F> An object containing all of the
ui:xxx
options with theui:
stripped off along with allglobalOptions
getWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()
Given a schema representing a field to render and either the name or actual Widget
implementation, returns the
React component that is used to render the widget. If the widget
is already a React component, then it is wrapped
with a MergedWidget
. Otherwise an attempt is made to look up the widget inside of the registeredWidgets
map based
on the schema type and widget
name. If no widget component can be found an Error
is thrown.
Parameters
- schema: S - The schema for the field
- widget: Widget<T, S, F> | string - Either the name of the widget OR a
Widget
implementation to use - [registeredWidgets=]: RegistryWidgetsType<T, S, F> - A registry of widget name to
Widget
implementation
Returns
- Widget<T, S, F>: The
Widget
component to use
Throws
- An error if there is no
Widget
component that can be returned
hashObject()
Stringifies an object
and returns the hash of the resulting string.
Sorts object fields in consistent order before stringify to prevent different hash ids for the same object.
Parameters
- object: object - The object for which the hash is desired
Returns
- string: The string obtained from the hash of the stringified object
hashString()
Hashes a string using the algorithm based on Java's hashing function.
Parameters
- string: string - The string for which to get the hash
Returns
- string: The resulting hash of the string in hex format
guessType()
Given a specific value
attempts to guess the type of a schema element. In the case where we have to implicitly
create a schema, it is useful to know what type to use based on the data we are defining.
Parameters
- value: any - The value from which to guess the type
Returns
- string: The best guess for the object type
hashForSchema<S extends StrictRJSFSchema = RJSFSchema>()
Stringifies the schema and returns the hash of the resulting string.
Parameters
- schema: S - The schema for which the hash is desired
Returns
- string: The string obtained from the hash of the stringified schema
hasWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>()
Detects whether the widget
exists for the schema
with the associated registryWidgets
and returns true if it does, or false if it doesn't.
Parameters
- schema: S - The schema for the field
- widget: Widget<T, S, F> | string - Either the name of the widget OR a
Widget
implementation to use - [registeredWidgets=]: RegistryWidgetsType<T, S, F> - A registry of widget name to
Widget
implementation
Returns
- boolean: True if the widget exists, false otherwise
helpId<T = any>()
Return a consistent id
for the field help element.
Parameters
- id: IdSchema<T> | string - Either simple string id or an IdSchema from which to extract it
Returns
- string: The consistent id for the field help element from the given
id
isConstant<S extends StrictRJSFSchema = RJSFSchema>()
This function checks if the given schema
matches a single constant value.
This happens when either the schema has an enum
array with a single value or there is a const
defined.
Parameters
- schema: S - The schema for a field
Returns
- boolean: True if the
schema
has a single constant value, false otherwise