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

# IDashboardInsightCustomizer

- 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
- Guides: [Customize widgets and visualizations](https://www.gooddata.ai/docs/gooddata-ui/latest/dashboard-plugins/customize-widgets/index.md)

Set of functions you can use to customize how insights are rendered.

**Signature:**

```typescript
export interface IDashboardInsightCustomizer 
```

## Methods

| Method | Description |
| --- | --- |
| [withCustomDecorator(providerFactory)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardinsightcustomizer/index.md#idashboardinsightcustomizerwithcustomdecorator) | Register a factory for insight decorator providers. |
| [withCustomInsightBodyProvider(provider)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardinsightcustomizer/index.md#idashboardinsightcustomizerwithcustominsightbodyprovider) | **_(ALPHA)_** Register a provider for React components to render insight body inside of the [DefaultDashboardInsight()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsight/index.md). |
| [withCustomProvider(provider)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardinsightcustomizer/index.md#idashboardinsightcustomizerwithcustomprovider) | Register a provider for React components to render insights. |
| [withRestrictedPlaceholderProvider(provider)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardinsightcustomizer/index.md#idashboardinsightcustomizerwithrestrictedplaceholderprovider) | **_(ALPHA)_** Register a provider for the component standing in for an insight widget the current user is not allowed to see. |
| [withTag(tag, component)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardinsightcustomizer/index.md#idashboardinsightcustomizerwithtag) | A convenience method that will register a specific React component to use for rendering any insight that is tagged with the provided `tag`. |

## Method details

### IDashboardInsightCustomizer.withCustomDecorator()

Register a factory for insight decorator providers.

**Signature:**

```typescript
withCustomDecorator(providerFactory: (next: InsightComponentProvider) => OptionalInsightComponentProvider): IDashboardInsightCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| providerFactory | (next: [InsightComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.insightcomponentprovider/index.md)) => [OptionalInsightComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalinsightcomponentprovider/index.md) | factory |

**Returns:**

[IDashboardInsightCustomizer](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardinsightcustomizer/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 (insight, widget) => {
        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(insight, widget);

        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 insight is eligible for decoration. If yes, it will add some extra text in front of the insight. Decorator defers rendering of the actual insight to the underlying provider.

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.

### IDashboardInsightCustomizer.withCustomInsightBodyProvider()

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Register a provider for React components to render insight body inside of the [DefaultDashboardInsight()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.defaultdashboardinsight/index.md).

**Signature:**

```typescript
withCustomInsightBodyProvider(provider: OptionalInsightBodyComponentProvider): IDashboardInsightCustomizer;
```

#### Parameters

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

**Returns:**

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

self, for call chaining sakes

#### Remarks

A provider takes the insight and widget that it is part of as input and is expected to return a React component that should be used to render that insight.

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 insight - 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.

### IDashboardInsightCustomizer.withCustomProvider()

Register a provider for React components to render insights.

**Signature:**

```typescript
withCustomProvider(provider: OptionalInsightComponentProvider): IDashboardInsightCustomizer;
```

#### Parameters

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

**Returns:**

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

self, for call chaining sakes

#### Remarks

A provider takes the insight and widget that it is part of as input and is expected to return a React component that should be used to render that insight.

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 insight - 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.

See the [IDashboardInsightCustomizer.withTag()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardinsightcustomizer/index.md#idashboardinsightcustomizerwithtag) convenience method to register components for insights  with particular tags.

### IDashboardInsightCustomizer.withRestrictedPlaceholderProvider()

> **Alpha API.** Initial API, highly likely to change outside SemVer. Don't build on it in production. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Register a provider for the component standing in for an insight widget the current user is not allowed to see.

**Signature:**

```typescript
withRestrictedPlaceholderProvider(provider: OptionalRestrictedPlaceholderComponentProvider): IDashboardInsightCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| provider | [OptionalRestrictedPlaceholderComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionalrestrictedplaceholdercomponentprovider/index.md) | provider of the replacement component |

**Returns:**

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

self, for call chaining

#### Remarks

The insight is deliberately not passed to the provider — it is the object being withheld. Returning undefined keeps the default placeholder for that widget.

### IDashboardInsightCustomizer.withTag()

A convenience method that will register a specific React component to use for rendering any insight that is tagged with the provided `tag`.

**Signature:**

```typescript
withTag(tag: string, component: CustomDashboardInsightComponent): IDashboardInsightCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| tag | string | tag to look for on the insight, this function will do nothing if this argument is an empty string |
| component | [CustomDashboardInsightComponent](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.customdashboardinsightcomponent/index.md) | component to use if the tag is found |

**Returns:**

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

self, for call chaining sakes

#### Remarks

If plugins register multiple providers for the same tag, then the provider will be picked using 'last-win' strategy.