Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @datadog/ui-extensions-react

Index

Functions

Functions

useContext

  • useContext(client: DDClient<unknown>): uiExtensionsSDK.Context | undefined

  • Returns a {@link uiExtensionsSDK.Context}. Will be updated whenever the {@link uiExtensionsSDK.Context} changes.

    This hook abstracts away the intricacies of keeping the {@link uiExtensionsSDK.Context} up to date.

    example

    This can be used like:

    import * as uiExtensionsReact from '@datadog/ui-extensions-react';
    import * as uiExtensionsSDK from '@datadog/ui-extensions-sdk';
    import * as React from 'react';

    const client = uiExtensionsSDK.init();

    const Widget: React.FunctionComponent = () => {
         const context = uiExtensionsReact.useContext(client)
         if (context == null) {
             return <p>Initializing</p>;
         }

         const colorTheme: uiExtensionsSDK.ColorTheme = context.app.currentUser.colorTheme;
         return <p>Widget is ready! Color theme: {colorTheme}</p>;
    }

    Parameters

    • client: DDClient<unknown>

      An initialized {@link uiExtensionsSDK.DDClient}. This should be the result of invoking {@link uiExtensionsSDK.init}.

    Returns uiExtensionsSDK.Context | undefined

    The {@link uiExtensionsSDK.Context}, if it exists.

useCustomWidgetOption

  • useCustomWidgetOption<Result>(client: DDClient<unknown>, optionName: string, parser: (option: string | boolean) => undefined | Result): Result | undefined

  • Returns the current value of a single custom widget option. This will be updated whenever the options change.

    This hook abstracts away the intricacies of keeping options up to date.

    example

    This hook can be used like:

    import * as uiExtensionsReact from '@datadog/ui-extensions-react';
    import * as uiExtensionsSDK from '@datadog/ui-extensions-sdk';
    import * as React from 'react';

    const client = uiExtensionsSDK.init();

    const parseInt = (option: string | boolean): number | undefined => {
        if (typeof option !== 'string') {
            return;
        }

        const parsed: number = Number.parseInt(option);
        if (Number.isNaN(parsed)) {
            return;
        }

        return parsed;
    };

    const CustomWidget: React.FunctionComponent = () => {
        const threshold = uiExtensionsReact.useCustomWidgetOption(client, 'threshold', parseInt);

        if (threshold == null) {
            return <p>Please set a threshold</p>;
        } else {
            return <p>Threshold: {threshold}</p>;
        }
    }

    Type parameters

    • Result

    Parameters

    • client: DDClient<unknown>

      An initialized {@link uiExtensionsSDK.DDClient}. This should be the result of invoking {@link uiExtensionsSDK.init}.

    • optionName: string

      The option name to look for.

    • parser: (option: string | boolean) => undefined | Result

      A function for parsing the option value.

        • (option: string | boolean): undefined | Result

        • Parameters

          • option: string | boolean

          Returns undefined | Result

    Returns Result | undefined

    The option value (if it exists).

useCustomWidgetOptionBoolean

  • useCustomWidgetOptionBoolean(client: DDClient<unknown>, optionName: string): boolean | undefined

  • Returns the current value of a single custom widget option that is expected to be a {@link boolean}. This will be updated whenever the options change.

    This hook abstracts away the intricacies of keeping up to date with an option.

    example

    This hook can be used like:

    import * as uiExtensionsReact from '@datadog/ui-extensions-react';
    import * as uiExtensionsSDK from '@datadog/ui-extensions-sdk';
    import * as React from 'react';

    const client = uiExtensionsSDK.init();

    const CustomWidget: React.FunctionComponent = () => {
        const verbose = uiExtensionsReact.useCustomWidgetOptionBoolean(client, 'verbose');

        if (verbose == null) {
            return <p>Please decide on verbosity</p>;
        } else {
            return <p>Verbose: {verbose}</p>;
        }
    }

    Parameters

    • client: DDClient<unknown>

      An initialized {@link uiExtensionsSDK.DDClient}. This should be the result of invoking {@link uiExtensionsSDK.init}.

    • optionName: string

      The option name to look for.

    Returns boolean | undefined

    The option value (if it exists).

useCustomWidgetOptionString

  • useCustomWidgetOptionString(client: DDClient<unknown>, optionName: string): string | undefined

  • Returns the current value of a single custom widget option that is expected to be a {@link string}. This will be updated whenever the options change.

    This hook abstracts away the intricacies of keeping up to date with an option.

    example

    This hook can be used like:

    import * as uiExtensionsReact from '@datadog/ui-extensions-react';
    import * as uiExtensionsSDK from '@datadog/ui-extensions-sdk';
    import * as React from 'react';

    const client = uiExtensionsSDK.init();

    const CustomWidget: React.FunctionComponent = () => {
        const query = uiExtensionsReact.useCustomWidgetOptionString(client, 'query');

        if (query == null) {
            return <p>Please set a query</p>;
        } else {
            return <p>Query: {query}</p>;
        }
    }

    Parameters

    • client: DDClient<unknown>

      An initialized {@link uiExtensionsSDK.DDClient}. This should be the result of invoking {@link uiExtensionsSDK.init}.

    • optionName: string

      The option name to look for.

    Returns string | undefined

    The option value (if it exists).

useTemplateVariable

  • useTemplateVariable(client: DDClient<unknown>, variableName: string): string | undefined

  • Returns the current value of a specific template variable. This will be updated whenever the template variable changes.

    This hook abstracts away the intricacies of keeping template variables up to date.

    example

    This hook can be used like:

    import * as uiExtensionsReact from '@datadog/ui-extensions-react';
    import * as uiExtensionsSDK from '@datadog/ui-extensions-sdk';
    import * as React from 'react';

    const client = uiExtensionsSDK.init();

    const CustomWidget: React.FunctionComponent = () => {
        const service = uiExtensionsReact.useTemplateVariable(client, 'service');

        if (service == null) {
            return <p>Please select a service from the template variables.</p>;
        }

        return <p>Service: {service}.</p>;
    }

    Parameters

    • client: DDClient<unknown>

      An initialized {@link uiExtensionsSDK.DDClient}. This should be the result of invoking {@link uiExtensionsSDK.init}.

    • variableName: string

      The name of the template variable to get the value of.

    Returns string | undefined

    The value of the template variable if it exists.

Generated using TypeDoc