### Install Dependencies and Run Demo App

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Installation.md

Navigate to the example directory, install its dependencies, and start the demo application.

```bash
cd example
npm install
npm run dev
```

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

### Install Dependencies and Build Library for Demo

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Installation.md

Install project dependencies and build the library before running the demo app.

```bash
npm install
npm run build
```

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

### Install Form Builder Library

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Installation.md

Install the Form Builder as an NPM package into your NodeJS project.

```bash
npm i --save @ginkgo-bioworks/react-json-schema-form-builder
```

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

### Install RJSF Core and MUI Theme

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Installs the core RJSF library, the MUI theme, and the AJV validator. These are needed for previewing the form generated by the Form Builder.

```bash
npm i --save @rjsf/core @rjsf/mui @rjsf/validator-ajv8
```

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

### Install Peer Dependencies

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Installation.md

Install the required peer dependencies for the Form Builder if they are not already present in your project.

```bash
npm i --save @mui/material @emotion/react @emotion/styled
```

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

### Install React JSON Schema Form Builder

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/index.md

Install the Form Builder package along with Material UI dependencies. This command installs the necessary packages for using the Form Builder in your React project.

```bash
npm i --save @ginkgo-bioworks/react-json-schema-form-builder @mui/material @emotion/react @emotion/styled
```

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

### Basic Form Builder Usage

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/index.md

Import and use the FormBuilder component in your React application. This example demonstrates how to manage the schema and UI schema state and update them via the onChange callback.

```jsx
import React, { useState } from 'react';
import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder';

function Example() {
  const [schema, setSchema] = useState('{}');
  const [uischema, setUiSchema] = useState('{}');

  return (
    <FormBuilder
      schema={schema}
      uischema={uischema}
      onChange={(newSchema, newUiSchema) => {
        setSchema(newSchema);
        setUiSchema(newUiSchema);
      }}
    />
  );
}

export default Example;
```

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

### Import Form Builder Component

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Installation.md

Import the FormBuilder component into your ReactJS files after installation.

```javascript
import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder';
```

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

### Complete FormBuilder with Custom Add Buttons

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

A full React component example demonstrating how to integrate custom 'Add Form Element' and 'Add Form Section' buttons by overriding the default 'Add' component using `mods` and handling state for schema, UI schema, and category hash.

```jsx
import React, { useState } from 'react';
import {
  FormBuilder,
  addCardObj,
  addSectionObj,
} from '@ginkgo-bioworks/react-json-schema-form-builder';
import type {
  AddFormObjectParameters,
  InitParameters,
  JsonSchema,
  UiSchema,
} from '@ginkgo-bioworks/react-json-schema-form-builder';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

function MyFormBuilder() {
  const [schema, setSchema] = useState<JsonSchema>({});
  const [uiSchema, setUiSchema] = useState<UiSchema>({});
  const [categoryHash, setCategoryHash] = useState('');

  const mods = {
    components: {
      add: (addProps: AddFormObjectParameters) => (
        <Stack direction="row" spacing={1}>
          <Button
            variant="outlined"
            size="small"
            onClick={() => addCardObj(addProps)}
          >
            Add Form Element
          </Button>
          <Button
            variant="outlined"
            size="small"
            onClick={() => addSectionObj(addProps)}
          >
            Add Form Section
          </Button>
        </Stack>
      ),
    },
  };

  return (
    <FormBuilder
      schema={JSON.stringify(schema)}
      uischema={JSON.stringify(uiSchema)}
      mods={mods}
      onChange={(schema, uischema) => {
        setSchema(JSON.parse(schema));
        setUiSchema(JSON.parse(uischema));
      }}
      onMount={(params: InitParameters) => {
        setCategoryHash(params.categoryHash || '');
      }}
    />
  );
}

export default MyFormBuilder;
```

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

### Saving categoryHash from onMount

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Example of how to capture the `categoryHash` from the `onMount` callback of the FormBuilder component and store it, typically in state.

```jsx
import type { InitParameters } from '@ginkgo-bioworks/react-json-schema-form-builder';

<FormBuilder
  // ...
  onMount={(params: InitParameters) => {
    // Here you can save categoryHash to props or state
    setCategoryHash(params.categoryHash || '');
  }}
/>
```

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

### Override Default New Form Element UI Schema

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Customize the default UI schema for new form elements using `newElementDefaultUiSchema`. This example sets new elements to use a 'customWidget'.

```javascript
const mods = {
  newElementDefaultUiSchema: {
    'ui:widget': 'customWidget',
  },
};
```

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

### Customizing MUI Theme for Form Builder

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Apply custom themes and component overrides globally to MUI components used within the FormBuilder and PredefinedGallery by wrapping your application with MUI's ThemeProvider. This example demonstrates setting a primary color and overriding the border-radius of MuiButton.

```jsx
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
  components: {
    // Override MUI component styles globally
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: 8,
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <FormBuilder
        schema={schema}
        uischema={uischema}
        onChange={onChange}
        className="my-custom-form-builder"
      />
      <PredefinedGallery
        schema={schema}
        uischema={uischema}
        onChange={onChange}
        className="my-custom-predefined-gallery"
      />
    </ThemeProvider>
  );
}
```

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

### Integrate Custom Form Inputs into FormBuilder

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

This snippet demonstrates how to integrate custom form inputs into the FormBuilder component by passing them via the `mods` prop. It shows a basic setup for a form with schema and UI schema state management.

```jsx
import React, { useState } from 'react';
import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder';

function Example() {
  const [schema, setSchema] = useState('{}');
  const [uischema, setUiSchema] = useState('{}');

  return (
    <FormBuilder
      schema={schema}
      uischema={uischema}
      onChange={(schema, uischema) => {
        setSchema(schema);
        setUiSchema(uischema);
      }}
      mods={{
        customFormInputs,
      }}
    />
  );
}

export default Example;

```

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

### Overriding the Add Component with Custom Buttons

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Provide a custom component via `mods.components.add` to completely replace the default 'Add' functionality. This example uses Material-UI buttons to add form elements or sections.

```jsx
import {
  addCardObj,
  type AddFormObjectParameters,
} from '@ginkgo-bioworks/react-json-schema-form-builder';
import Button from '@mui/material/Button';

const mods = {
  components: {
    add: (properties: AddFormObjectParameters) => (
      <Button onClick={() => addCardObj(properties)}>Add Element</Button>
    ),
  },
};
```

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

### Override Default New Form Element Schema

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Customize the default schema for new form elements using `newElementDefaultDataOptions`. This example sets new elements to a 'Reference' type pointing to a schema definition.

```typescript
import type { DataOptions } from '@ginkgo-bioworks/react-json-schema-form-builder';

const mods = {
  newElementDefaultDataOptions: {
    $ref: '#/definitions/firstNames',
    title: 'Field',
  } as DataOptions,
};
```

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

### Clone Demo App Repository

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Installation.md

Clone the repository to access the demo application.

```bash
git clone https://github.com/ginkgobioworks/react-json-schema-form-builder.git
cd react-json-schema-form-builder
```

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

### InitParameters Type for onMount Callback

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Defines the type for parameters received by the `onMount` callback, which includes the `categoryHash` needed for matching input types.

```typescript
import type { InitParameters } from '@ginkgo-bioworks/react-json-schema-form-builder';

// The onMount callback receives InitParameters
const handleMount = (params: InitParameters) => {
  // params.categoryHash is available here
  setCategoryHash(params.categoryHash);
};
```

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

### Importing Add Functions

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Import the `addCardObj` and `addSectionObj` functions from the package to programmatically add form elements or sections.

```javascript
import {
  addCardObj,
  addSectionObj,
} from '@ginkgo-bioworks/react-json-schema-form-builder';
```

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

### FormBuilder with RJSF Form Preview

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Integrates the FormBuilder with RJSF's core component and MUI theme to provide a live preview of the generated form. It synchronizes schema and UI schema changes between the builder and the preview.

```jsx
import React, { useState } from 'react';
import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder';
import { withTheme } from '@rjsf/core';
import { Theme as MuiTheme } from '@rjsf/mui';
import validator from '@rjsf/validator-ajv8';

const Form = withTheme(MuiTheme);

function Example() {
  const [schema, setSchema] = useState('{}');
  const [uischema, setUiSchema] = useState('{}');
  const [formData, setFormData] = useState({});

  return (
    <div>
      <FormBuilder
        schema={schema}
        uischema={uischema}
        onChange={(schema, uischema) => {
          setSchema(schema);
          setUiSchema(uischema);
        }}
      />
      <Form
        schema={JSON.parse(schema)}
        uiSchema={JSON.parse(uischema)}
        onChange={(data) => setFormData(data.formData)}
        formData={formData}
        validator={validator}
      />
    </div>
  );
}

export default Example;

```

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

### Default New Form Element Schema

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Shows the default schema applied to new form elements, which results in a 'Short answer' input type.

```javascript
{
  title: `New Input ${i}`,
  type: 'string',
  default: '',
}
```

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

### Basic FormBuilder Component Usage

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

A basic React component demonstrating how to use the FormBuilder. It manages the JSON schema and UI schema state and updates them via the onChange callback.

```jsx
import React, { useState } from 'react';
import { FormBuilder } from '@ginkgo-bioworks/react-json-schema-form-builder';

function Example() {
  const [schema, setSchema] = useState('{}');
  const [uischema, setUiSchema] = useState('{}');

  return (
    <FormBuilder
      schema={schema}
      uischema={uischema}
      onChange={(schema, uischema) => {
        setSchema(schema);
        setUiSchema(uischema);
      }}
    />
  );
}

export default Example;

```

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

### FormBuilder with PredefinedGallery for Definitions

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Combines the FormBuilder with the PredefinedGallery component to manage JSON schema definitions. This allows defining reusable components within the schema and editing them via the gallery.

```jsx
import React, { useState } from 'react';
import {
  FormBuilder,
  PredefinedGallery,
} from '@ginkgo-bioworks/react-json-schema-form-builder';

function Example() {
  const [schema, setSchema] = useState('{}');
  const [uischema, setUiSchema] = useState('{}');

  return (
    <div>
      <FormBuilder
        schema={schema}
        uischema={uischema}
        onChange={(schema, uischema) => {
          setSchema(schema);
          setUiSchema(uischema);
        }}
      />
      <PredefinedGallery
        schema={schema}
        uischema={uischema}
        onChange={(schema, uischema) => {
          setSchema(schema);
          setUiSchema(uischema);
        }}
      />
    </div>
  );
}

export default Example;

```

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

### Define Custom Phone Number Form Input

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

This snippet shows how to create a custom form input for phone numbers, including country code selection and pattern validation. It defines the input's display name, matching conditions, default schema, UI widget, and custom rendering for both the card body and modal body.

```jsx
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import type {
  FormInput,
  Match,
  DataType,
  CardComponent,
  CardComponentProps,
} from '@ginkgo-bioworks/react-json-schema-form-builder';

const phoneNumberFormInput: FormInput = {
  displayName: 'Phone Number',
  matchIf: [
    {
      types: ['string'],
      widget: 'phone',
    },
  ],
  defaultDataSchema: {
    type: 'string',
    pattern: '^\\+?[1-9]\\d{1,14}$', // E.164 format
  },
  defaultUiSchema: {
    'ui:widget': 'phone',
    'ui:placeholder': '+1234567890',
  },
  type: 'string',
  cardBody: ({ parameters, onChange }) => {
    const defaultValue =
      typeof parameters.default === 'string' ? parameters.default : '';
    const countryCode = (parameters as any).countryCode || '+1';
    const phoneNumber = defaultValue.replace(/^\\+?\\d{1,3}/, '') || '';

    return (
      <>
        <Typography variant='subtitle2' gutterBottom>
          Default Phone Number
        </Typography>
        <Box sx={{ display: 'flex', gap: 1 }}>
          <TextField
            select
            value={countryCode}
            onChange={(ev) => {
              const newCode = ev.target.value;
              const newParams: CardComponentProps = {
                ...parameters,
                default: `${newCode}${phoneNumber}`,
              };
              (newParams as any).countryCode = newCode;
              onChange(newParams);
            }}
            size='small'
            sx={{ minWidth: 120 }}
          >
            <MenuItem value='+1'>+1 (US)</MenuItem>
            <MenuItem value='+44'>+44 (UK)</MenuItem>
            <MenuItem value='+33'>+33 (FR)</MenuItem>
            <MenuItem value='+49'>+49 (DE)</MenuItem>
            <MenuItem value='+81'>+81 (JP)</MenuItem>
          </TextField>
          <TextField
            value={phoneNumber}
            placeholder='1234567890'
            onChange={(ev) => {
              const newParams: CardComponentProps = {
                ...parameters,
                default: `${countryCode}${ev.target.value}`,
              };
              (newParams as any).countryCode = countryCode;
              onChange(newParams);
            }}
            size='small'
            fullWidth
          />
        </Box>
      </>
    );
  },
  modalBody: ({ parameters, onChange }) => (
    <>
      <Typography variant='subtitle2' gutterBottom>
        Phone Number Configuration
      </Typography>
      <TextField
        label='Validation Pattern (regex)'
        value={parameters.pattern || '^\\+?[1-9]\\d{1,14}$'}
        placeholder='^\\+?[1-9]\\d{1,14}$'
        onChange={(ev) => onChange({ ...parameters, pattern: ev.target.value })}
        size='small'
        fullWidth
        sx={{ mb: 2 }}
        helperText='E.164 format: + followed by country code and number'
      />
      <Typography variant='caption' color='text.secondary'>
        Customize the validation pattern for phone number format
      </Typography>
    </>
  ),
};

const customFormInputs = {
  phone: phoneNumberFormInput,
};

```

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

### AddFormObjectParameters Type Definition

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Defines the structure of parameters required by the add functions, including schema, uischema, mods, onChange callback, definition data, definition UI, and category hash.

```typescript
import type {
  AddFormObjectParameters,
  DefinitionData,
  JsonSchema,
  UiSchema,
  UiSchemaProperty,
  Mods,
} from '@ginkgo-bioworks/react-json-schema-form-builder';

// The type definition:
type AddFormObjectParameters = {
  schema: JsonSchema | Record<string, unknown>;
  uischema: UiSchema | Record<string, unknown>;
  mods?: Mods;
  onChange: (schema: JsonSchema | Record<string, unknown>, uischema: UiSchema | Record<string, unknown>) => unknown;
  definitionData: DefinitionData;
  definitionUi: Record<string, UiSchemaProperty>;
  index?: number;
  categoryHash: Record<string, string>;
};
```

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

### Customizing Add Button Labels

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Change the default labels for 'Add form element' and 'Add form section' by modifying the 'labels' property within the 'mods' object.

```javascript
const mods = {
  labels: {
    addElementLabel: 'my element label',
    addSectionLabel: 'my section label',
  },
};
```

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

### Importing Types for Mods

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Mods.md

Import necessary types from the package for defining custom form inputs and modifications. TypeScript provides automatic type checking when these types are imported.

```typescript
import type {
  Mods,
  FormInput,
  Match,
  CardComponent,
  CardComponentProps,
  ModLabels,
  DataOptions,
  AddFormObjectParameters,
  DefinitionData,
  DataType,
  JsonSchemaProperty,
  UiSchemaProperty,
} from '@ginkgo-bioworks/react-json-schema-form-builder';
```

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

### DataType Union Type

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Mods.md

Defines the supported JSON Schema data types for form inputs. This union type is used to specify the data type for custom form inputs.

```typescript
type DataType = 'string' | 'number' | 'boolean' | 'integer' | 'array' | 'object' | 'null';
```

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

### Deactivate Form Inputs

Source: https://github.com/ginkgobioworks/react-json-schema-form-builder/blob/main/docs/Usage.md

Hide specific input types like 'time' and 'checkbox' by setting the `deactivatedFormInputs` property in the mods object. This prevents them from appearing in the FormBuilder component.

```javascript
const mods = {
  deactivatedFormInputs: ['time', 'checkbox'],
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.