+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "CustomScrollbar"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
+++

## CustomScrollbar class

Wraps component into <Scrollbars> component from `react-custom-scrollbars`

<b>Signature</b>

```typescript
export declare class CustomScrollbar extends Component<Props> 
```
<b>Import</b>

```typescript
import { CustomScrollbar } from '@grafana/ui';
```
<b>Constructors</b>

|  Constructor | Modifiers | Description |
|  --- | --- | --- |
|  [constructor(props)](#constructor-props) |  | Constructs a new instance of the <code>CustomScrollbar</code> class |

<b>Properties</b>

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [defaultProps](#defaultprops-property) | <code>static</code> | <code>Partial&lt;Props&gt;</code> |  |
|  [renderThumb](#renderthumb-property) |  | <code>(thumb: 'thumb-horizontal' &#124; 'thumb-vertical', passedProps: any) =&gt; JSX.Element</code> |  |
|  [renderThumbHorizontal](#renderthumbhorizontal-property) |  | <code>(passedProps: any) =&gt; JSX.Element</code> |  |
|  [renderThumbVertical](#renderthumbvertical-property) |  | <code>(passedProps: any) =&gt; JSX.Element</code> |  |
|  [renderTrack](#rendertrack-property) |  | <code>(track: 'track-vertical' &#124; 'track-horizontal', hideTrack: boolean &#124; undefined, passedProps: any) =&gt; JSX.Element</code> |  |
|  [renderTrackHorizontal](#rendertrackhorizontal-property) |  | <code>(passedProps: any) =&gt; JSX.Element</code> |  |
|  [renderTrackVertical](#rendertrackvertical-property) |  | <code>(passedProps: any) =&gt; JSX.Element</code> |  |
|  [renderView](#renderview-property) |  | <code>(passedProps: any) =&gt; JSX.Element</code> |  |

<b>Methods</b>

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [componentDidMount()](#componentdidmount-method) |  |  |
|  [componentDidUpdate()](#componentdidupdate-method) |  |  |
|  [render()](#render-method) |  |  |
|  [updateAfterMount()](#updateaftermount-method) |  |  |
|  [updateScroll()](#updatescroll-method) |  |  |

### constructor(props)

Constructs a new instance of the `CustomScrollbar` class

<b>Signature</b>

```typescript
constructor(props: Props);
```
<b>Parameters</b>

|  Parameter | Type | Description |
|  --- | --- | --- |
|  props | <code>Props</code> |  |

### defaultProps property

<b>Signature</b>

```typescript
static defaultProps: Partial<Props>;
```

### renderThumb property

<b>Signature</b>

```typescript
renderThumb: (thumb: 'thumb-horizontal' | 'thumb-vertical', passedProps: any) => JSX.Element;
```

### renderThumbHorizontal property

<b>Signature</b>

```typescript
renderThumbHorizontal: (passedProps: any) => JSX.Element;
```

### renderThumbVertical property

<b>Signature</b>

```typescript
renderThumbVertical: (passedProps: any) => JSX.Element;
```

### renderTrack property

<b>Signature</b>

```typescript
renderTrack: (track: 'track-vertical' | 'track-horizontal', hideTrack: boolean | undefined, passedProps: any) => JSX.Element;
```

### renderTrackHorizontal property

<b>Signature</b>

```typescript
renderTrackHorizontal: (passedProps: any) => JSX.Element;
```

### renderTrackVertical property

<b>Signature</b>

```typescript
renderTrackVertical: (passedProps: any) => JSX.Element;
```

### renderView property

<b>Signature</b>

```typescript
renderView: (passedProps: any) => JSX.Element;
```

### componentDidMount method

<b>Signature</b>

```typescript
componentDidMount(): void;
```
<b>Returns:</b>

`void`

### componentDidUpdate method

<b>Signature</b>

```typescript
componentDidUpdate(): void;
```
<b>Returns:</b>

`void`

### render method

<b>Signature</b>

```typescript
render(): JSX.Element;
```
<b>Returns:</b>

`JSX.Element`

### updateAfterMount method

<b>Signature</b>

```typescript
updateAfterMount(): void;
```
<b>Returns:</b>

`void`

### updateScroll method

<b>Signature</b>

```typescript
updateScroll(): void;
```
<b>Returns:</b>

`void`