### Install Semantic UI Mapper (yarn)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-form-renderer/README.md

Install the Semantic UI component mapper using yarn. Ensure Semantic UI components are installed.

```bash
yarn add @data-driven-forms/suir-component-mapper
```

--------------------------------

### Install Semantic UI Mapper (npm)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-form-renderer/README.md

Install the Semantic UI component mapper using npm. Ensure Semantic UI components are installed.

```bash
npm install @data-driven-forms/suir-component-mapper -S
```

--------------------------------

### Install Dependencies

Source: https://github.com/data-driven-forms/react-forms/blob/master/templates/component-mapper/README.md

Run this command to install all project dependencies using npm.

```bash
npm install
```

--------------------------------

### Installation

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/editor/dnd.md

Instructions for installing the @data-driven-forms/dnd library using npm or yarn.

```APIDOC
## Installation

```bash
npm install --save @data-driven-forms/dnd
```
or
```bash
yarn add @data-driven-forms/dnd
```
```

--------------------------------

### Basic TypeScript Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/typescript.md

Demonstrates the basic usage of TypeScript with the React form renderer. Ensure you have the necessary typings installed.

```typescript
import DocPage from '@docs/doc-page';
import TsExample from '@docs/examples/components/ts-example'

<DocPage>

# TypeScript

React form renderer and component mappers include Typescript typings. Each exported file has its own definitions.

## Basic TypeScript example

<TsExample />


You can learn more about Renderer and its prop types [here](/components/renderer).

Mapper component prop types are listed in the mappers section of the documentation. You can start with [checkbox](/provided-mappers/checkbox?mapper=mui).

</DocPage>
```

--------------------------------

### Start a Package

Source: https://github.com/data-driven-forms/react-forms/blob/master/templates/component-mapper/README.md

Navigate to a specific package directory and run this command to start its demo playground for testing changes.

```bash
cd packages/{{componentmapper}}-component-mapper
npm start
```

--------------------------------

### Install @data-driven-forms/dnd with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/editor/dnd.md

Use this command to install the library using npm.

```bash
npm install --save @data-driven-forms/dnd
```

--------------------------------

### Install Dependencies

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-form-renderer/README.md

Installs all project dependencies using yarn.

```console
yarn install
```

--------------------------------

### Start Documentation Development Server

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Starts a local development version of the documentation website, which is built using NextJS.

```bash
yarn dev
```

--------------------------------

### Implement Custom Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/examples/custom-component-mapper.md

This example showcases the setup for a custom component mapper. It is intended for use when you need to define custom rendering logic for form fields.

```javascript
import DocPage from '@docs/doc-page';
import CodeExample from '@docs/code-example';

<DocPage>


# Custom component mapper

This example shows how to implement a custom component mapper. Read more [here](/mappers/custom-mapper).

## Example

<CodeExample
  source="components/component-mapper/form-fields-mapper"
  mode="preview"
/>

</DocPage>
```

--------------------------------

### Install @data-driven-forms/dnd with yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/editor/dnd.md

Use this command to install the library using yarn.

```bash
yarn add @data-driven-forms/dnd
```

--------------------------------

### Install Ant Design Mapper (yarn)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-form-renderer/README.md

Install the Ant Design component mapper using yarn. Ensure Ant Design components are installed.

```bash
yarn add @data-driven-forms/ant-component-mapper
```

--------------------------------

### Install Blueprint Component Mapper (yarn)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/blueprint-component-mapper/README.md

Install the Blueprint component mapper package using yarn.

```bash
yarn add @data-driven-forms/blueprint-component-mapper
```

--------------------------------

### Install editor-core and dnd packages

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/editor/core-editor.md

Use npm or yarn to install the necessary packages for the editor-core functionality.

```bash
npm install --save @data-driven-forms/editor-core @data-driven-forms/dnd
```

```bash
yarn add @data-driven-forms/editor-core @data-driven-forms/dnd
```

--------------------------------

### Start Local Development Server

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/README.md

Navigate to the react-renderer-demo package and run this command to start the local development server. It will be accessible at localhost:3000.

```bash
cd packages/react-renderer-demo
yarn dev
```

--------------------------------

### Custom Form Template Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/components/children.md

This example demonstrates a minimal custom form template using 'useFormApi' to get the 'handleSubmit' function. It renders the schema title, form fields, and a submit button.

```jsx
const CustomTemplate = ({hideButtons, formFields, schema}) => {
  const { handleSubmit } = useFormApi();
  return (
    <form onSubmit={handleSubmit}>
      { schema.title }
      { formFields }
      {!hideButtons && (
        <button type="submit">Submit</button>
      )}
    </form>
  )
}

const MyForm = (props) => {
  return (
    <FormRenderer
        componentMapper={simpleComponentMapper}
        onSubmit={handleFormSubmit}
        schema={formSchema}
        subscription={{values: true}}
        clearOnUnmount
    >
        <CustomTemplate hideButtons />
    </FormRenderer>
  )
}
```

--------------------------------

### Record Level Validation Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/schema/record-level-validation.md

This example demonstrates how to implement record-level validation for a form. It is useful for validating multiple fields simultaneously. No specific setup or imports are shown in this snippet.

```javascript
import React from 'react'
import { Form, Field } from 'react-final-form'

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const validate = async (values) => {
  const errors = {}
  if (values.firstName && values.lastName && values.firstName === values.lastName) {
    errors.firstName = 'Must be unique'
    errors.lastName = 'Must be unique'
  }
  if (values.checkedA && values.checkedB && values.checkedA === values.checkedB) {
    errors.checkedA = 'Must be unique'
    errors.checkedB = 'Must be unique'
  }
  await sleep(100) // simulate server latency
  if (values.favoriteColor && !['red', 'orange', 'yellow'].includes(values.favoriteColor)) {
    errors.favoriteColor = 'Must be a valid color'
  }
  return errors
}

const MyForm = () => (
  <Form
    onSubmit={async values => {
      await sleep(300)
      window.alert(JSON.stringify(values, 0, 2))
    }}
    validate={validate}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit}>
        <div>
          <label>First Name</label>
          <Field name="firstName" component="input" placeholder="First Name" />
        </div>
        <div>
          <label>Last Name</label>
          <Field name="lastName" component="input" placeholder="Last Name" />
        </div>
        <div>
          <label>Favorite Color</label>
          <Field name="favoriteColor" component="select">
            <option />
            <option value="red">Red</option>
            <option value="orange">Orange</option>
            <option value="yellow">Yellow</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
          </Field>
        </div>
        <div>
          <label>Checkbox A</label>
          <Field name="checkedA" component="input" type="checkbox" />
        </div>
        <div>
          <label>Checkbox B</label>
          <Field name="checkedB" component="input" type="checkbox" />
        </div>
        <div className="buttons">
          <button type="submit" disabled={submitting || pristine}>
            Submit
          </button>
          <button type="button" onClick={form.reset} disabled={submitting || pristine}>
            Reset
          </button>
        </div>
        <pre>{JSON.stringify(values, 0, 2)}</pre>
      </form>
    )}
  />
)

export default MyForm

```

--------------------------------

### Render Sample Example Preview

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/examples/sample-example.md

Use this component to render a preview of the sample example within a form. Ensure the 'components/examples/sample-example' path is correctly configured.

```javascript
import DocPage from '@docs/doc-page';
import CodeExample from '@docs/code-example';

<DocPage>


# Sample example

## Use markdown syntax to write text

## What to include?
- description of the component
- what issue it can help solve
- include component preview in a form

## Preview

<CodeExample source="components/examples/sample-example" mode="preview" />

</DocPage>
```

--------------------------------

### Install React Form Renderer (yarn)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/blueprint-component-mapper/README.md

Install the core React Form Renderer package using yarn.

```bash
yarn add @data-driven-forms/react-form-renderer
```

--------------------------------

### Global Form Subscription Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/examples/value-listener.md

This example shows how to set up a global subscription on the form level. Be cautious as global subscriptions can impact performance on large forms.

```jsx
import React from 'react';
import { componentTypes, Form } from '@data-driven-forms/react-form-state';
import ValueListener from './ValueListener'; // Assuming ValueListener is in a separate file

const MyForm = () => (
  <Form
    onSubmit={console.log}
    subscription={{
      values: true,
      touched: true,
      errors: true,
    }}
    initialValues={{
      fieldA: '',
      fieldB: '',
    }}
    render={({ form }) => (
      <form>
        {/* Your form fields here */}
        <ValueListener form={form} />
      </form>
    )}
  />
);

export default MyForm;
```

--------------------------------

### Install SUIR mapper with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/suir-component-mapper/README.md

Installs the Semantic UI React component mapper using npm.

```bash
$ npm install @data-driven-forms/suir-component-mapper -S
```

--------------------------------

### Install Blueprint Component Mapper (npm)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/blueprint-component-mapper/README.md

Install the Blueprint component mapper package using npm.

```bash
npm install @data-driven-forms/blueprint-component-mapper -S
```

--------------------------------

### Install PatternFly 4 Mapper (yarn)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/pf4-component-mapper/README.md

Install the PatternFly 4 component mapper using yarn.

```bash
yarn add @data-driven-forms/pf4-component-mapper
```

--------------------------------

### Install React Form Renderer with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/suir-component-mapper/README.md

Installs the core React Form Renderer package using npm.

```bash
$ npm install @data-driven-forms/react-form-renderer -S
```

--------------------------------

### Run Package Demo

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-form-renderer/README.md

Starts the demo playground for a specific package, useful for testing changes.

```console
cd packages/pf3-component-mapper
yarn start
```

--------------------------------

### Install React Form Renderer with yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/suir-component-mapper/README.md

Installs the core React Form Renderer package using yarn.

```bash
$ yarn add @data-driven-forms/react-form-renderer
```

--------------------------------

### Install Carbon Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/carbon-component-mapper.md

Use npm or yarn to install the Carbon component mapper package. Carbon Design System must be installed separately.

```bash
npm install --save @data-driven-forms/carbon-component-mapper
```

```bash
yarn add @data-driven-forms/carbon-component-mapper
```

--------------------------------

### Install React Form Renderer (npm)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/blueprint-component-mapper/README.md

Install the core React Form Renderer package using npm.

```bash
npm install @data-driven-forms/react-form-renderer -S
```

--------------------------------

### Install @data-driven-forms/editor-pro with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/editor/pro-editor.md

Use this command to install the Pro Editor package using npm.

```bash
npm install --save @data-driven-forms/editor-pro
```

--------------------------------

### Install @data-driven-forms/editor-pro with yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/editor/pro-editor.md

Use this command to install the Pro Editor package using yarn.

```bash
yarn add @data-driven-forms/editor-pro
```

--------------------------------

### Install React Form Renderer

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the core React Form Renderer package using npm or yarn.

```bash
npm install @data-driven-forms/react-form-renderer -S
```

```bash
yarn add @data-driven-forms/react-form-renderer
```

--------------------------------

### Install SUIR mapper with yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/suir-component-mapper/README.md

Installs the Semantic UI React component mapper using yarn.

```bash
$ yarn add @data-driven-forms/suir-component-mapper
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/README.md

Run this command in the root directory of react-forms to install all necessary project dependencies.

```bash
yarn
```

--------------------------------

### Install Semantic UI React Mapper (npm)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/suir-component-mapper.md

Use npm to install the Semantic UI React component mapper.

```bash
npm install --save @data-driven-forms/suir-component-mapper
```

--------------------------------

### Run Package Playground

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Start the development playground for a specific package, e.g., 'pf4-component-mapper'. Navigate to the package directory first.

```bash
cd packages/pf4-component-mapper
yarn start
```

--------------------------------

### Install {{componentmapper}} Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/templates/component-mapper/README.md

Use npm to install the specific {{componentmapper}} component mapper package.

```bash
$ npm install @data-driven-forms/{{componentmapper}}-component-mapper -S
```

--------------------------------

### Install Evergreen Component Mapper with yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/evergreen.md

Use this command to install the Evergreen Component Mapper using yarn.

```bash
yarn add @data-driven-forms/evergreen-component-mapper
```

--------------------------------

### Install Evergreen Component Mapper with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/evergreen.md

Use this command to install the Evergreen Component Mapper using npm.

```bash
npm install --save @data-driven-forms/evergreen-component-mapper
```

--------------------------------

### Generate Component Examples

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/README.md

Use this command within the react-renderer-demo package to generate component examples from mappers. This is useful for documentation and testing.

```bash
cd packages/react-renderer-demo
yarn generate:examples
```

--------------------------------

### Install PatternFly 4 Mapper (npm)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/pf4-component-mapper/README.md

Install the PatternFly 4 component mapper using npm.

```bash
npm install @data-driven-forms/pf4-component-mapper -S
```

--------------------------------

### Import Code Example Component

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/development-setup.md

Use the CodeExample component to import and display your custom form component implementation. Specify the source path and rendering mode.

```md
import CodeExample from '@docs/code-example';

<CodeExample source="components/examples/sample-example" mode="preview" />
```

--------------------------------

### Install MUI Component Mapper (yarn)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/mui-component-mapper/README.md

Install the Material-UI component mapper for Data Driven Forms using yarn.

```bash
yarn add @data-driven-forms/mui-component-mapper
```

--------------------------------

### Install BlueprintJS Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the BlueprintJS component mapper for Data Driven Forms using npm or yarn.

```bash
npm install @data-driven-forms/blueprint-component-mapper -S
```

```bash
yarn add @data-driven-forms/blueprint-component-mapper
```

--------------------------------

### Install Carbon Component Mapper with yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/carbon-component-mapper/README.md

Install the Carbon component mapper for Data Driven Forms using yarn.

```bash
yarn add @data-driven-forms/carbon-component-mapper
```

--------------------------------

### Install Semantic UI Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the Semantic UI component mapper for Data Driven Forms using npm or yarn.

```bash
npm install @data-driven-forms/suir-component-mapper -S
```

```bash
yarn add @data-driven-forms/suir-component-mapper
```

--------------------------------

### Install Carbon Component Mapper with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/carbon-component-mapper/README.md

Install the Carbon component mapper for Data Driven Forms using npm.

```bash
npm install @data-driven-forms/carbon-component-mapper -S
```

--------------------------------

### Install Material-UI Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the Material-UI component mapper for Data Driven Forms using npm or yarn.

```bash
npm install @data-driven-forms/mui-component-mapper -S
```

```bash
yarn add @data-driven-forms/mui-component-mapper
```

--------------------------------

### Install MUI Component Mapper (npm)

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/mui-component-mapper/README.md

Install the Material-UI component mapper for Data Driven Forms using npm.

```bash
npm install @data-driven-forms/mui-component-mapper -S
```

--------------------------------

### Install Ant Design Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/ant-component-mapper/README.md

Install the Ant Design component mapper package using npm.

```bash
npm install @data-driven-forms/ant-component-mapper -S
```

--------------------------------

### Install PatternFly 4 Mapper with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/pf4-component-mapper.md

Use this command to install the PatternFly 4 component mapper using npm.

```bash
npm install --save @data-driven-forms/pf4-component-mapper
```

--------------------------------

### Install Carbon Component Mapper with Yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the Carbon Design System component mapper for Data Driven Forms using Yarn.

```bash
$ yarn add @data-driven-forms/carbon-component-mapper
```

--------------------------------

### Install Carbon Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the Carbon Design System component mapper for Data Driven Forms using npm.

```bash
$ npm install @data-driven-forms/carbon-component-mapper -S
```

--------------------------------

### Wizard Component Schema Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/schema/introduction.md

Example of how to define a 'wizard' component within the schema. The first level of 'fields' for a wizard are 'wizard-steps'.

```jsx
const schema = {
  fields: [{
    component: 'wizard', // here you define the wizard component
    name: 'wizard-field',
    ...
    // first level of this `fields` are the direct children of wizard - wizard-steps
    fields: [{
      name: 'step-1',
      title: 'Foo',
      ...
      fields: [{
        // these are not children of the wizard step and you require a component attribute again
        component: 'text-field',
        name: 'bar',
        ...
      }]
    }]
  }]
}
```

--------------------------------

### Install @data-driven-forms/parsers with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/parsers/README.md

Use npm to install the parsers package. This command adds the package as a dependency to your project.

```bash
npm install @data-driven-forms/parsers -S
```

--------------------------------

### Install Ant Design Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the Ant Design component mapper for Data Driven Forms using npm.

```bash
$ npm install @data-driven-forms/ant-component-mapper -S
```

--------------------------------

### Install PatternFly 4 Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the PatternFly 4 component mapper for Data Driven Forms using npm or yarn.

```bash
npm install @data-driven-forms/pf4-component-mapper -S
```

```bash
yarn add @data-driven-forms/pf4-component-mapper
```

--------------------------------

### Install MaterialUI Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/mui-component-mapper.md

Use npm or yarn to add the MaterialUI component mapper to your project. MaterialUI itself needs to be installed separately.

```bash
npm install --save @data-driven-forms/mui-component-mapper
```

```bash
yarn add @data-driven-forms/mui-component-mapper
```

--------------------------------

### Install Ant Design Component Mapper with Yarn

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Install the Ant Design component mapper for Data Driven Forms using Yarn.

```bash
$ yarn add @data-driven-forms/ant-component-mapper
```

--------------------------------

### Serve Documentation Locally

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Emulates the production environment for the documentation website locally.

```bash
yarn serve
```

--------------------------------

### Basic Form Rendering with MUI Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/mui-component-mapper/README.md

Example of how to use the FormRenderer with the MUI component mapper and a simple schema. Ensure you have installed both '@data-driven-forms/react-form-renderer' and '@data-driven-forms/mui-component-mapper'.

```jsx
import React from 'react';
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
import { componentMapper, FormTemplate } from '@data-driven-forms/mui-component-mapper';

const schema = {
  fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'name',
    label: 'Your name'
  }]
}

const Form = () => (
  <FormRenderer
    schema={schema}
    componentMapper={componentMapper}
    FormTemplate={FormTemplate}
    onSubmit={console.log}
  />
)
```

--------------------------------

### Install React Form Renderer with npm

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/installation.md

Use this command to add the React Form Renderer package to your project using npm.

```bash
npm install --save @data-driven-forms/react-form-renderer
```

--------------------------------

### Install BlueprintJS Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/blueprint-component-mapper.md

Use npm or yarn to add the BlueprintJS component mapper to your project. Ensure all Blueprint packages and styles are installed separately according to their guidelines.

```bash
npm install --save @data-driven-forms/blueprint-component-mapper
```

```bash
yarn add @data-driven-forms/blueprint-component-mapper
```

--------------------------------

### Example Schema with Mapped Condition

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/mappers/condition-mapper.md

A JSON schema example demonstrating how to use 'mappedAttributes' to link a condition to a function defined in the ConditionMapper.

```json
[
  {
    "name": "field1",
    "label": "Field 1",
    "component": "text-field",
  },
  {
    "name": "mapped-condition",
    "label": "Mapped Condition",
    "component": "text-field",
    "condition": {
      "mappedAttributes": {
        "is": ["nameFn", "John", "Doe"],
      },
      "when": "field1",
    },
  },
]
```

--------------------------------

### Build Project

Source: https://github.com/data-driven-forms/react-forms/blob/master/templates/component-mapper/README.md

Execute this command to build the entire project, including all packages.

```bash
npm run build
```

--------------------------------

### Basic Form Usage with Blueprint Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/blueprint-component-mapper/README.md

Example of integrating the FormRenderer with the Blueprint component mapper and FormTemplate in a React application. Ensure all necessary packages are installed before use.

```jsx
import React from 'react';
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
import { componentMapper, FormTemplate } from '@data-driven-forms/blueprint-component-mapper';

const schema = {
  fields: [{
    component: componentTypes.TEXT_FIELD,
    name: 'name',
    label: 'Your name'
  }]
}

const Form = () => (
  <FormRenderer
    schema={schema}
    componentMapper={componentMapper}
    FormTemplate={FormTemplate}
    onSubmit={console.log}
  />
)
```

--------------------------------

### Transformed Import Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/optimization.md

This shows the result of the Babel transformation, converting a standard import to a specific file import.

```diff
--- { "switchable": false } ---
-import { useField } from '@data-driven-forms/react-form-renderer';
+import useField from '@data-driven-forms/react-form-renderer/use-field';
```

--------------------------------

### Define Sequence Condition in React Form

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/schema/condition-sequence.md

Example of a sequence condition configuration for a text field. This setup triggers different 'set' actions based on the values of fields 'a' or 'b'.

```jsx
{
  fields: [{
    name: 'Sequence condition',
    component: 'text-field',
    condition: {
      sequence: [
        { when: ['a'], is: 'x', then: { set: { field: 'value' } } },
        { when: ['b'], is: 'x', then: { set: { field: 'different value' } } }
      ]
    }
  }]
}
```

--------------------------------

### Build Production Version

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/README.md

Change the directory to the react-renderer-demo package and execute this command to build the production-ready version of the application.

```bash
cd packages/react-renderer-demo
yarn build
```

--------------------------------

### File Upload Handler Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/mappers/file-input.md

This snippet demonstrates a typical file upload handler. It is often used in conjunction with form submission logic to process selected files.

```jsx
import React from 'react';

const UploadHandler = () => {
  const handleFileChange = (event) => {
    const files = event.target.files;
    // Process files here, e.g., upload them
    console.log('Selected files:', files);
  };

  return (
    <input type="file" onChange={handleFileChange} multiple />
  );
};

export default UploadHandler;
```

--------------------------------

### File Input Component with Preview

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/mappers/file-input.md

This example shows a file input component that allows users to select files and provides a preview of the selected files. It utilizes an upload handler for processing.

```jsx
import React, { useState } from 'react';
import UploadHandler from './upload-handler'; // Assuming upload-handler.js is in the same directory

const FileInput = () => {
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleFileChange = (event) => {
    const files = Array.from(event.target.files);
    setSelectedFiles(files);
    // You can also pass files up to a parent component or handle upload logic here
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} multiple />
      {selectedFiles.length > 0 && (
        <div>
          <h4>Selected Files:</h4>
          <ul>
            {selectedFiles.map((file, index) => (
              <li key={index}>{file.name} ({Math.round(file.size / 1024)} KB)</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default FileInput;
```

--------------------------------

### Wizard Schema with Basic Steps

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/doc-components/examples-texts/pf4/wizard.md

Illustrates a basic wizard schema with sequential steps. Each step has a name, title, and specifies the next step.

```jsx
Schema: [
  {
    name: '1',
    title: 'Select Type',
    nextStep: 'security'
  },
  {
    name: 'security',
    title: 'Security',
    nextStep: 'credentials',
    substepOf: 'Configuration'
  },{
    name: 'credentials',
    title: 'Credentials',
    nextStep: 'summary',
    substepOf: 'Configuration'
  },{
    name: 'summary',
    title: 'Summary'
  },
]
```

--------------------------------

### Build Project

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-form-renderer/README.md

Builds all packages in the monorepo.

```console
yarn build
```

--------------------------------

### Navigate and Test Package

Source: https://github.com/data-driven-forms/react-forms/blob/master/README.md

Change directory into a specific package and run its tests. This is useful for focused testing.

```bash
cd packages/pf4-component-mapper
yarn test
```

--------------------------------

### Or Condition Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/schema/or.md

This example shows a text field that becomes active if either field 'a' or field 'b' has the value 'x'.

```jsx
{
  fields: [{
    name: 'Or condition',
    component: 'text-field',
    condition: {
      or: [
        {
          when: ['a'],
          is: 'x'
        }, {
          when: ['b'],
          is: 'x'
        }
      ]
    }
  }]
}
```

--------------------------------

### Run Bundle Analyzer

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/README.md

Execute this command in the react-renderer-demo package to run the bundle analyzer. This helps in understanding and optimizing the application's bundle size.

```bash
cd packages/react-renderer-demo
yarn analyze
```

--------------------------------

### Run All Tests

Source: https://github.com/data-driven-forms/react-forms/blob/master/templates/component-mapper/README.md

Execute this command from the core folder to run all project tests.

```bash
npm test
```

--------------------------------

### Condition Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/schema/introduction.md

An example of a 'condition' object used to control field visibility. The field will only appear if the 'first-name' field's value is 'Douglas'.

```jsx
{
    ...,
    condition: {
        when: 'first-name',
        is: 'Douglas'
    }
}
```

--------------------------------

### getValueFromNode Implementation Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/doc-components/examples-texts/pf4/dual-list-select.md

Example of a `getValueFromNode` function used to extract the children property from a React span element as the option's value.

```jsx
const options = (
    option => option.props.children
)
```

--------------------------------

### Timezone Configuration Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/doc-components/examples-texts/carbon/time-picker.md

Use this structure to define timezone options when the component is not set to string format. Ensure 'showsAs' corresponds to a valid timezone for accurate conversion.

```jsx
{
    label: 'PST',
    value: 'PST',
    showsAs: 'US/Eastern'
}
```

--------------------------------

### Install Ant Design Component Mapper

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/provided-mappers/ant-component-mapper.md

Use npm or yarn to add the Ant Design component mapper to your project. Ant Design itself needs to be installed separately following their guidelines.

```bash
npm install --save @data-driven-forms/ant-component-mapper
```

```bash
yarn add @data-driven-forms/ant-component-mapper
```

--------------------------------

### Children Render Function Example

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/components/children.md

This example shows how to use a render function as a child of FormRenderer to dynamically create the form template. The render function receives 'formFields' and 'schema' as arguments.

```jsx
<FormRenderer
    componentMapper={simpleComponentMapper}
    onSubmit={handleFormSubmit}
    schema={formSchema}
    subscription={{values: true}}
    clearOnUnmount
>
    {({
      formFields,
      schema
    }) => (
      {/** Template implementation **/} 
    )}
</FormRenderer>
```

--------------------------------

### Example: Display field based on multiple conditions

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/schema/and.md

This example shows how to display the 'BarFoo' field only when 'controlled-field-1' is exactly 'Bar' AND 'controlled-field-2' includes 'FooBar' in its value. The 'pattern' property uses a regular expression for matching.

```jsx
{
  fields: [
    {
      name: 'controlled-field-1',
      component: 'text-field',
    },
    {
      name: 'controlled-field-2',
      component: 'text-field',
    },
    {
      name: 'BarFoo',
      label: 'Foo is Bar!',
      component: 'text-field',
      condition: {
        and: [
          {
            when: 'controlled-field-1',
            is: 'Bar',
          },
          {
            when: 'controlled-field-2',
            pattern: /FooBar/
          }
        ]
      },
    },
  ]
}
```

--------------------------------

### Import and Use SelectCommon Component

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/doc-components/examples-texts/suir/select.md

This snippet shows how to import and render the SelectCommon component from a local markdown file. Ensure the path to the markdown file is correct.

```javascript
import SelectCommon from '../select.md';

<SelectCommon/>
```

--------------------------------

### Remove Node Modules

Source: https://github.com/data-driven-forms/react-forms/blob/master/templates/component-mapper/README.md

This command deletes all node_modules directories to perform a clean installation.

```bash
rm -rf node_modules
```

--------------------------------

### Define Next Step as String

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/doc-components/examples-texts/wizard.md

Use a string to specify the name of the next step for a simple, linear navigation flow.

```jsx
{
  nextStep: 'next-step-name'
}
```

--------------------------------

### Integrate ConditionMapper with FormRenderer

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/mappers/condition-mapper.md

Example of how to pass the defined conditionMapper object as a prop to the FormRenderer component.

```jsx
<FormRenderer
  {...props}
  schema={schema}
  conditionMapper={conditionMapper}
/>
```

--------------------------------

### Generate Mapper Template

Source: https://github.com/data-driven-forms/react-forms/blob/master/packages/react-renderer-demo/src/pages/development-setup.md

Uses a CLI tool to generate a base project structure and dummy components for creating new component mappers.

```bash
yarn generate-template
```