Data Driven Forms

@data-driven-forms/common is a utility package containing shared code used across multiple @data-driven-forms/* packages. It provides a centralized location for:

• Shared interfaces and propTypes
• Common mapper logic, including:
  • wizard
  • select
  • multiplechoice list
  • form template
  • dual list select
• Demo schemas used for testing and demonstration purposes.

The Evergreen Component Mapper provides components from the Evergreen design system.

Warning: This mapper is currently considered incomplete and primarily provides basic components for the pro editor.

The AWS Northstar component mapper allows you to use the Form Renderer component from the Amazon Web Services - NorthStar - Prototyping Design System with Data Driven Forms.

Note: This is a community-maintained mapper.

A component mapper is an object of React components used by FormRenderer to map schema componentType identifiers to actual React components.

Each key in the mapper object must be a unique identifier that matches the componentType defined in your form schema. The value for each key can be either:

1. A React component.
2. An object containing a component and globally defined props.

To use a mapper, pass it to the componentMapper prop of the FormRenderer component.

import { FormRenderer } from '@data-driven-forms/react-form-renderer';

const componentMapper = {
  'new-component': NewComponent
};

const Form = (props) => (
  <FormRenderer
    componentMapper={componentMapper}
    {...props}
  />
);

Record-level validation allows you to define a validation function for the entire form rather than individual fields. This is particularly useful for cross-field validation, where the validity of one field depends on the value of another (e.g., ensuring a 'confirm password' field matches a 'password' field).

A record-level validator is a function that receives the entire form values object and returns either an object containing error messages or a Promise that resolves to an error object. If the form is valid, it should return undefined or an empty object.

/*
Signature:
(values) => object | Promise<object>
*/

All components mapped by the Semantic UI react mapper accept all props defined in the original Semantic UI react documentation. You can pass these props directly through your form schema to customize the appearance or behavior of the components.

To apply common customizations across multiple fields without repeating them in every schema entry, refer to the global component props documentation.

The resolveProps utility allows you to dynamically change component props at runtime based on the current state of the form. This is useful when a field's configuration (like disabled, required, or placeholder) depends on the value of another field in the form.

To ensure the field updates immediately when the dependency changes, you must trigger a re-render of the field being modified. There are two primary strategies for this: using subscription for simplicity or FormSpy for performance optimization.

// Conceptual usage of resolveProps in a schema
{
  "type": "text",
  "name": "myField",
  "resolveProps": (formState) => ({
    "disabled": formState.otherField === 'some-value'
  })
}

If you need to apply the same prop value to every component instance within a form, you can achieve this by configuring your component mapper.

Note: The specific prop names and values you use depend entirely on the component mapper being employed (e.g., Material-UI, Ant Design, etc.), as they must match the props expected by the underlying UI library components.