import { Meta } from "@storybook/addon-docs";

<Meta
    title="Features/As"
    id="as"
/>

# As function

This function allow you to change the *underlying element type* of a component or integrate Orbit with an external library like [React router](https://reactrouter.com/).

## Usage

To specify a new underlying type:

```jsx
import { as, TextLink } from "@sharegate/orbit-ui";

const TextLinkAsButton = as(TextLink, "button");

<TextLinkAsButton onClick={() => window.location.href = "/home"}>Home</TextLinkAsButton>
```

To integrate with a third party:

```jsx
import { as, TextLink } from "@sharegate/orbit-ui";
import { Link as ReactRouterLink } from "react-router-dom";

const RouterTextLink = as(TextLink, ReactRouterLink, { normalizeStyles: true });

<RouterTextLink to="/home">Home</RouterTextLink>
```

## How it works

Previously, all Orbit components were accepting an as prop. Since we introduced TypeScript, the `as` prop has proven to be difficult. Dynamic typings based on a prop value is not Typescript forte.

To mitigate the problem, we choose to deprecate the `as` prop in favor of an `as(baseComponent, asComponent)` function. The `as()` function return a new component which render the provided `baseComponent` with `asComponent` as the underlying type and merge the typings of both components.

