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.

Usage

To specify a new underlying type:

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:

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.