Skip to main content

​
useJsonForms

The primary hook for accessing JSON Forms state and dispatch function from within the JsonFormsStateProvider context.

​
Returns

​
core
JsonFormsCore
The core JSON Forms state containing:
  • data - Current form data
  • schema - JSON Schema
  • uischema - UI Schema
  • errors - Validation errors
  • additionalErrors - Additional validation errors
  • validator - Validation function
  • ajv - Ajv instance
​
renderers
JsonFormsRendererRegistryEntry[]
Available renderer registry entries
​
cells
JsonFormsCellRendererRegistryEntry[]
Available cell renderer registry entries
​
config
any
Configuration object
​
uischemas
JsonFormsUISchemaRegistryEntry[]
UI schema registry entries
​
readonly
boolean
Read-only mode flag
​
i18n
JsonFormsI18nState
Internationalization state with locale and translation functions
​
dispatch
Dispatch<CoreActions>
Dispatch function for updating core state. Can be used to dispatch actions like:
  • Actions.init() - Initialize state
  • Actions.update() - Update data
  • Actions.updateCore() - Update core properties
  • Actions.setConfig() - Set configuration

​
Example

import { useJsonForms } from '@jsonforms/react';
import { Actions } from '@jsonforms/core';

function CustomComponent() {
  const { core, dispatch } = useJsonForms();
  
  const handleReset = () => {
    dispatch(Actions.update('', () => ({})));
  };
  
  return (
    <div>
      <pre>{JSON.stringify(core.data, null, 2)}</pre>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

​
Usage in Custom Renderers

While HOCs are the recommended approach for most renderers, you can use useJsonForms directly for more control: 
import { useJsonForms } from '@jsonforms/react';
import { ControlProps, OwnPropsOfControl } from '@jsonforms/core';

function MyCustomControl(props: OwnPropsOfControl) {
  const ctx = useJsonForms();
  
  // Manually map state to props (HOCs do this automatically)
  const { data, path, handleChange, enabled } = ctxToControlProps(ctx, props);
  
  return (
    <input
      value={data || ''}
      onChange={(e) => handleChange(path, e.target.value)}
      disabled={!enabled}
    />
  );
}

​
Context Mapping Functions

These utility functions are used internally by HOCs but can also be used with useJsonForms for custom state mapping:

​
ctxToControlProps

Maps context and own props to control props. 
function ctxToControlProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfControl
): ControlProps

​
ctxToLayoutProps

Maps context and own props to layout props. 
function ctxToLayoutProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfLayout
): LayoutProps

​
ctxToArrayControlProps

Maps context and own props to array control props. 
function ctxToArrayControlProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfControl
): ArrayControlProps

​
ctxToArrayLayoutProps

Maps context and own props to array layout props. 
function ctxToArrayLayoutProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfControl
): ArrayLayoutProps

​
ctxToCellProps

Maps context and own props to cell props. 
function ctxToCellProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfCell
): CellProps

​
ctxToEnumControlProps

Maps context and own props to enum control props with memoized options. 
function ctxToEnumControlProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfEnum
): EnumControlProps

​
ctxToOneOfProps

Maps context and own props to oneOf combinator props. 
function ctxToOneOfProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfControl
): CombinatorRendererProps

​
ctxToAnyOfProps

Maps context and own props to anyOf combinator props. 
function ctxToAnyOfProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfControl
): CombinatorRendererProps

​
ctxToAllOfProps

Maps context and own props to allOf combinator props. 
function ctxToAllOfProps(
  ctx: JsonFormsStateContext,
  props: OwnPropsOfControl
): AllOfProps

​
Dispatch Mapping Functions

Functions for mapping dispatch to props:

​
ctxDispatchToControlProps

Creates dispatch props for controls. 
function ctxDispatchToControlProps(
  dispatch: Dispatch<ReducerAction<any>>
): DispatchPropsOfControl

​
ctxDispatchToArrayControlProps

Creates dispatch props for array controls. 
function ctxDispatchToArrayControlProps(
  dispatch: Dispatch<ReducerAction<any>>
): DispatchPropsOfArrayControl

​
ctxDispatchToMultiEnumProps

Creates dispatch props for multi-enum controls. 
function ctxDispatchToMultiEnumProps(
  dispatch: Dispatch<ReducerAction<any>>
): DispatchPropsOfMultiEnumControl

​
Translation Hooks

​
withTranslateProps

HOC that injects translation props into a component. 
function withTranslateProps<P>(
  Component: ComponentType<TranslateProps & P>
): ComponentType<P>
Provides:
  • t - Translation function
  • locale - Current locale string

​
withArrayTranslationProps

HOC that provides array-specific translations for array renderers. 
function withArrayTranslationProps<P extends ArrayLayoutProps>(
  Component: ComponentType<P & { translations: ArrayTranslations }>
): ComponentType<P & TranslateProps>
Provides:
  • translations - Object with translated strings for array operations (add, remove, up, down, etc.)

​
Example

import { withTranslateProps, TranslateProps } from '@jsonforms/react';

interface MyComponentProps {
  label: string;
}

function MyComponent({ label, t, locale }: MyComponentProps & TranslateProps) {
  return <div>{t(label, label)}</div>;
}

export default withTranslateProps(MyComponent);

Build docs developers (and LLMs) love

Get started for freeTalk to us