› API Reference › @grafana/ui › ClickOutsideWrapper

ClickOutsideWrapper class

Signature

export declare class ClickOutsideWrapper extends PureComponent<Props, State>

Import

import { ClickOutsideWrapper } from '@grafana/ui';

Properties

Property Modifiers Type Description
defaultProps static {
includeButtonPress: boolean;
parent: Window & typeof globalThis;
useCapture: boolean;
}
myRef React.RefObject<HTMLDivElement>
onOutsideClick (event: any) => void
state {
hasEventListener: boolean;
}

Methods

Method Modifiers Description
componentDidMount()
componentWillUnmount()
render()

defaultProps property

Signature

static defaultProps: {
        includeButtonPress: boolean;
        parent: Window & typeof globalThis;
        useCapture: boolean;
    };

myRef property

Signature

myRef: React.RefObject<HTMLDivElement>;

onOutsideClick property

Signature

onOutsideClick: (event: any) => void;

state property

Signature

state: {
        hasEventListener: boolean;
    };

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element

Related Grafana video resources
Grafana documentation
59:50
Getting started with Grafana

Take a guided tour of Grafana and learn how to monitor a web service using Prometheus and Loki in this beginner-friendly webinar.
All about Grafana plugins: Visualizing disparate data sources in one place

Grafana Enterprise plugins are integrations with other commercial monitoring tools (such as Datadog, Splunk, New Relic, ServiceNow, Oracle, and Dynatrace) that are created, maintained, and supported by the Grafana Labs team.
Demo: Getting started with Grafana Enterprise and observability

Join the Grafana Labs team for a 30-minute demo of how to get started with the Grafana Stack, so you can go from zero to observability in just a few minutes.