# Clickable

## Examples


### Basic

```typescript
import React from 'react';

import Clickable from '@splunk/react-ui/Clickable';

// eslint-disable-next-line no-alert

const handleOnClick = () => window.alert('You clicked me');

function Basic() {
    return (
        <>
            <Clickable onClick={handleOnClick}>Alert Button</Clickable>
            <br />
            <br />
            <Clickable to="Select">Link to Select component</Clickable>
            <br />
            <br />
            <Clickable to="Select" disabled>
                Disabled link to Select component
            </Clickable>
            <br />
            <br />
            <Clickable to="http://duckduckgo.com" openInNewContext>
                External Link (new tab/window)
            </Clickable>
        </>
    );
}

export default Basic;
```



### Disabled

Prevents user from activating the component and adds disabled styling. If set to dimmed, the component is able to receive focus. If set to disabled, the component is unable to receive focus (as a result of setting the html disabled attribute). The default behavior when disabled={true} is "dimmed".

```typescript
import React from 'react';

import Clickable from '@splunk/react-ui/Clickable';


function Disabled() {
    return (
        <>
            <Clickable to="Select" disabled>
                Select component
            </Clickable>
            <br />
            <Clickable to="Select" disabled="disabled">
                Select component
            </Clickable>
        </>
    );
}

export default Disabled;
```



### NavigationProvider

```typescript
import React from 'react';

import Clickable, {
    isInternalLink,
    NavigationProvider,
    NavigationProviderClickHandler,
} from '@splunk/react-ui/Clickable';


const handleClick: NavigationProviderClickHandler = (e, { openInNewContext, to }) => {
    if (!openInNewContext && isInternalLink(to)) {
        e.preventDefault();
        window.alert(`In NavigationProvider click handler, to: ${to}`); // eslint-disable-line no-alert
    }
};

function NavigationProviderExample() {
    return (
        <NavigationProvider onClick={handleClick}>
            <Clickable to="Select">Link to Select component</Clickable>
            <br />
            <br />
            <Clickable to="Select" openInNewContext>
                Link to Select component (new tab/window)
            </Clickable>
            <br />
            <br />
            <Clickable to="http://duckduckgo.com" openInNewContext>
                External Link (new tab/window)
            </Clickable>
        </NavigationProvider>
    );
}

export default NavigationProviderExample;
```




## API


### Clickable API

`Clickable` renders as a `button` element, or as an `a` element if the `to` prop is set
and the `disabled` prop is `false`. This is called link mode.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no |  |  |
| disabled | boolean \| 'dimmed' \| 'disabled' | no |  | Prevents user from activating the component and adds disabled styling.  If set to `dimmed`, the component is able to receive focus. If set to `disabled`, the component is unable to receive focus (as a result of setting the html `disabled` attribute).  The default behavior when `disabled={true}` is `dimmed`. |
| elementRef | React.Ref<HTMLButtonElement \| HTMLAnchorElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts.  `HTMLAnchorElement` in link mode, `HTMLButtonElement` otherwise. |
| navigationLabel | string | no |  | The text representation of the navigational link. This should be provided if child content is not a string.  Ignored if not in link mode. |
| onClick | React.MouseEventHandler<HTMLButtonElement \| HTMLAnchorElement> | no |  | The onClick event handler is ignored if Ctrl or meta keys are pressed, which allows the link to open in a new context. |
| openInNewContext | boolean | no |  | To open the link in a new window, set openInNewContext to `true`. Ignored if not in link mode. |
| to | string | no |  | A URL for a link. If set, an `a` element is used instead of a `button` element (link mode). |



### NavigationProvider API

Used to provide an override for the `onClick` for links for single page applications so that
internal links can navigate without a page reload.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | no |  |  |
| onClick | NavigationProviderClickHandler | no |  | An `onClick` handler to use when a link is clicked if no other `onClick` handler is supplied. The function takes the event and an options argument with `to` and `openInNewContext` |
| onLinkClick | NavigationProviderClickHandler | no |  | Triggers when a link is clicked, even if the link has its own `onClick` handler. The function takes the event and an options argument with `to` and `openInNewContext` |
| transformUrl | (     url: string,     data: {         isInternal?: boolean;         isRootRelative?: boolean;     } ) => string | no |  | If set, all links that use the NavigationProvider's context will be transformed using this function. |

#### Types

| Name | Type | Description |
|------|------|------|
| NavigationProviderClickHandler | (     event: React.MouseEvent<HTMLAnchorElement>,     data: {         openInNewContext?: boolean;         to: string;         originalTo: string;         label?: string;     } ) => void |  |