# ComponentFactory

class

A helper class implementing the UI component ([view](module_ui_view-View.md)) factory.

It allows functions producing specific UI components to be registered under their unique names in the factory. A registered component can be then instantiated by providing its name. Note that the names are case insensitive.

```typescript
// The editor provides localization tools for the factory.
const factory = new ComponentFactory( editor );

factory.add( 'foo', locale => new FooView( locale ) );
factory.add( 'bar', locale => new BarView( locale ) );

// An instance of FooView.
const fooInstance = factory.create( 'foo' );

// Names are case insensitive so this is also allowed:
const barInstance = factory.create( 'Bar' );
```

The [editor locale](module_core_editor_editor-Editor.md#member-locale) is passed to the factory function when [`create`](#function-create) is called.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L39)

<a id="properties">

## Properties

<a id="member-editor">

### `editor: Editor` _(readonly)_

The editor instance that the factory belongs to.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L43)

<a id="member-_components">

### `_components: Map<string, object>` _(private)_

Registered component factories.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L48)

<a id="methods">

## Methods

<a id="function-constructor">

### `constructor( editor )`

Creates an instance of the factory.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L55)

#### Parameters

* `editor: Editor`

  The editor instance.

<a id="function-add">

### `add( name, callback ) → void`

Registers a component factory function that will be used by the [create](#function-create) method and called with the [editor locale](module_core_editor_editor-Editor.md#member-locale) as an argument, allowing localization of the [view](module_ui_view-View.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L77)

#### Parameters

* `name: string`

  The name of the component.

* `callback: ( locale: Locale ) => View`

  The callback that returns the component.

#### Returns

* `void`

<a id="function-create">

### `create( name ) → View`

Creates an instance of a component registered in the factory under a specific name.

When called, the [editor locale](module_core_editor_editor-Editor.md#member-locale) is passed to the previously [added](#function-add) factory function, allowing localization of the [view](module_ui_view-View.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L91)

#### Parameters

* `name: string`

  The name of the component.

#### Returns

* `View`

  The instantiated component view.

<a id="function-has">

### `has( name ) → boolean`

Checks if a component of a given name is registered in the factory.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L116)

#### Parameters

* `name: string`

  The name of the component.

#### Returns

* `boolean`

<a id="function-names">

### `names() → IterableIterator<string>`

Returns an iterator of registered component names. Names are returned in lower case.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/componentfactory.ts#L62)

#### Returns

* `IterableIterator<string>`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)