---
title: "The registerComponent method"
slug: "the-registercomponent-method"
abstract: "Describes the registerComponent method that is used in a component registration flow."
---
# The registerComponent method

You call the `registerComponent` method as part of a [flow](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/walkthrough--registering-an-external-react-component.html "Walkthrough: Registering an external React component") for registering external components within the Component builder.

## Import

To enable the `registerComponent` function, you first need to import it.

```javascript
import {registerComponent} from '@sitecore-feaas/clientside'
registerComponent(...);

```

## Syntax

```javascript
registerComponent(component, options)

```

## Options

The following is a list of supported parameters. The only required parameter is `name`. The list of `properties` are definitions of input fields for this component, visible to a content author when using the component inside the Page builder. The `required` and `ui` parameters reference these properties.

| Name | Type | Description |
| --- | --- | --- |
| `name` | string, required | The name of the component to display in the Components and Pages interface. |
| `description` | string | A description of the component to display in the Components and Pages interface. |
| `thumbnail` | URL | The URL of a thumbnail image to display in the Components builder for this component. The recommended dimensions are 280 * 520 px. |
| `group` | string | The collection of components to which this component belongs, for example, 'Default collection'. |
| `properties` | [JSON schema](https://rjsf-team.github.io/react-jsonschema-form/docs/json-schema/) object | A [JSON schema](https://json-schema.org) that describes the component input properties. When using this component, the Pages user is presented with a configuration interface (UI) generated automatically based on that schema. The UI can be customized with the `uiSchema` provided in the `ui` property. |
| `required` | string array | An array of `properties` keys that require input from the Pages user. |
| `ui` | [JSON schema](https://rjsf-team.github.io/react-jsonschema-form/docs/json-schema/) object | UI-specific configurations for the specified `properties`. This option expects a [uiSchema object](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema). |

## Example

```javascript
FEAAS.registerComponent(MyComponent, {
    name: 'MyComponent',
    description: 'Description of MyComponent.',
    required: ['firstName'],
    properties: {
       firstName: {
       type: 'string',
       title: 'First name',
       required: true
       },
       telephone: {
       type: 'string',
       title: 'Telephone',
       minLength: 10
       },
    },
    ui: {
    firstName: {
      'ui:autofocus': true,
      'ui:placeholder': 'Write your first name'
    },
    telephone: {
      'ui:options': {
        inputType: 'tel'
      }
    }
  }
});

```