> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# IVisualizationSwitcherCustomizer

- Package: [@gooddata/sdk-ui-dashboard](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/index.md)
- Kind: interface
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-dashboard/src/plugins/customizer.ts

Set of functions you can use to customize some aspects of the VisualizationSwitcher.

**Signature:**

```typescript
export interface IVisualizationSwitcherCustomizer 
```

## Methods

| Method | Description |
| --- | --- |
| [withCustomSwitcherDecorator(providerFactory)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md#ivisualizationswitchercustomizerwithcustomswitcherdecorator) | Register a factory for RichText decorator providers. |
| [withCustomSwitcherProvider(provider)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md#ivisualizationswitchercustomizerwithcustomswitcherprovider) | Register a provider for React components to render VisualizationSwitcher. |
| [withCustomToolbarDecorator(providerFactory)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md#ivisualizationswitchercustomizerwithcustomtoolbardecorator) | Register a factory for RichText decorator providers. |
| [withCustomToolbarProvider(provider)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md#ivisualizationswitchercustomizerwithcustomtoolbarprovider) | Register a provider for React components to render VisualizationSwitcherToolbar. |

## Method details

### IVisualizationSwitcherCustomizer.withCustomSwitcherDecorator()

Register a factory for RichText decorator providers.

**Signature:**

```typescript
withCustomSwitcherDecorator(providerFactory: (next: VisualizationSwitcherComponentProvider) => OptionalVisualizationSwitcherComponentProvider): IVisualizationSwitcherCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| providerFactory | (next: [VisualizationSwitcherComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.visualizationswitchercomponentprovider/index.md)) => [OptionalVisualizationSwitcherComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalvisualizationswitchercomponentprovider/index.md) | factory |

**Returns:**

[IVisualizationSwitcherCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md)

#### Remarks

Decorators are a way to add customizations or embellishments on top of an existing component. Decorators are more complex to write because they need to work with the component they should decorate and add 'something' on top of that component.

This is best illustrated on an example:

#### Example

```tsx
withCustomDecorator((next) => {
    return (filter) => {
        if (some_condition_to_prevent_decoration) {
            return undefined;
        }

        // Make sure you call this outside the component render function,
        // otherwise a new instance of the decorated component is created on each re-render.
        const Decorated = next(filter);

        function MyCustomDecorator(props) {
             return (
                 <div>
                     <p>My Custom Decoration</p>
                     <Decorated {...props} />
                 </div>
             )
        }

        return MyCustomDecorator;
    }
})
```
The above shows how to register a decorator that will use some condition to determine whether particular attribute filter is eligible for decoration.

Note: the factory function that you specify will be called immediately at the registration time. The provider that it returns will be called at render time.

### IVisualizationSwitcherCustomizer.withCustomSwitcherProvider()

Register a provider for React components to render VisualizationSwitcher.

**Signature:**

```typescript
withCustomSwitcherProvider(provider: OptionalVisualizationSwitcherComponentProvider): IVisualizationSwitcherCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| provider | [OptionalVisualizationSwitcherComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalvisualizationswitchercomponentprovider/index.md) | provider to register |

**Returns:**

[IVisualizationSwitcherCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md)

self, for call chaining sakes

#### Remarks

A provider takes the VisualizationSwitcher as input and is expected to return a React component that should be used to render that VisualizationSwitcher.

If the provider returns `undefined` then:

- if there are other providers registered, they will be called to see if they can provide  a component to render the VisualizationSwitcher - if there are no other providers registered, the default, built-in component will be used.

You may register multiple providers. They will be evaluated in the order you register them.

### IVisualizationSwitcherCustomizer.withCustomToolbarDecorator()

Register a factory for RichText decorator providers.

**Signature:**

```typescript
withCustomToolbarDecorator(providerFactory: (next: VisualizationSwitcherToolbarComponentProvider) => OptionalVisualizationSwitcherToolbarComponentProvider): IVisualizationSwitcherCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| providerFactory | (next: [VisualizationSwitcherToolbarComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.visualizationswitchertoolbarcomponentprovider/index.md)) =&gt; [OptionalVisualizationSwitcherToolbarComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalvisualizationswitchertoolbarcomponentprovider/index.md) | factory |

**Returns:**

[IVisualizationSwitcherCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md)

#### Remarks

Decorators are a way to add customizations or embellishments on top of an existing component. Decorators are more complex to write because they need to work with the component they should decorate and add 'something' on top of that component.

This is best illustrated on an example:

#### Example

```tsx
withCustomDecorator((next) => {
    return (filter) => {
        if (some_condition_to_prevent_decoration) {
            return undefined;
        }

        // Make sure you call this outside the component render function,
        // otherwise a new instance of the decorated component is created on each re-render.
        const Decorated = next(filter);

        function MyCustomDecorator(props) {
             return (
                 <div>
                     <p>My Custom Decoration</p>
                     <Decorated {...props} />
                 </div>
             )
        }

        return MyCustomDecorator;
    }
})
```
The above shows how to register a decorator that will use some condition to determine whether particular attribute filter is eligible for decoration.

Note: the factory function that you specify will be called immediately at the registration time. The provider that it returns will be called at render time.

### IVisualizationSwitcherCustomizer.withCustomToolbarProvider()

Register a provider for React components to render VisualizationSwitcherToolbar.

**Signature:**

```typescript
withCustomToolbarProvider(provider: OptionalVisualizationSwitcherToolbarComponentProvider): IVisualizationSwitcherCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| provider | [OptionalVisualizationSwitcherToolbarComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalvisualizationswitchertoolbarcomponentprovider/index.md) | provider to register |

**Returns:**

[IVisualizationSwitcherCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.ivisualizationswitchercustomizer/index.md)

self, for call chaining sakes

#### Remarks

A provider takes the VisualizationSwitcherToolbar as input and is expected to return a React component that should be used to render that VisualizationSwitcherToolbar.

If the provider returns `undefined` then:

- if there are other providers registered, they will be called to see if they can provide  a component to render the VisualizationSwitcherToolbar - if there are no other providers registered, the default, built-in component will be used.

You may register multiple providers. They will be evaluated in the order you register them.