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

# IDashboardContentCustomizer

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

> **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).
> 

**Signature:**

```typescript
export interface IDashboardContentCustomizer 
```

## Methods

| Method | Description |
| --- | --- |
| [withCustomDecorator(providerFactory)](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.idashboardcontentcustomizer/index.md#idashboardcontentcustomizerwithcustomdecorator) | **_(ALPHA)_** Register a factory for dashboard content decorator providers. |

## Method details

### IDashboardContentCustomizer.withCustomDecorator()

> **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 factory for dashboard content decorator providers.

**Signature:**

```typescript
withCustomDecorator(providerFactory: (next: DashboardContentComponentProvider) => OptionalDashboardContentComponentProvider): IDashboardContentCustomizer;
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| providerFactory | (next: [DashboardContentComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.dashboardcontentcomponentprovider/index.md)) => [OptionalDashboardContentComponentProvider](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.optionaldashboardcontentcomponentprovider/index.md) | factory |

**Returns:**

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

        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 if dashboard content will be decorated.

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.