Skip to content

Commit

Permalink
Docs(web-react): Adding elementType to api table and new poly. example
Browse files Browse the repository at this point in the history
- There was missing prop elementType in API table
- Add new example "Custom polymorphic component"
  • Loading branch information
pavelklibani committed Nov 15, 2023
1 parent 98864cf commit e7d8cda
Showing 1 changed file with 27 additions and 1 deletion.
28 changes: 27 additions & 1 deletion packages/web-react/src/components/Link/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ Link allows users to follow navigation.
| Name | Type | Default | Required | Description |
| ------------------ | ------------------------------------------------ | --------- | -------- | ------------------------------ |
| `color` | [Action Link Color dictionary][dictionary-color] | `primary` || Color of the link |
| `elementType` | `ElementType` | `a` || Type of element used as |
| `href` | `string` ||| Link's href attribute |
| `isUnderlined` | `bool` | `false` || Whether is the link underlined |
| `isDisabled` | `bool` | `false` || Whether is the link disabled |
| `isUnderlined` | `bool` | `false` || Whether is the link underlined |
| `ref` | `ForwardedRef<HTMLAnchorElement>` ||| Link element reference |
| `UNSAFE_className` | `string` ||| Wrapper custom class name |
| `UNSAFE_style` | `CSSProperties` ||| Wrapper custom style |
Expand All @@ -34,4 +35,29 @@ const CustomLink = (props: SpiritLinkProps): JSX.Element => {
};
```

## Custom polymorphic component

If you are using `forwardRef`, use the `PolymorphicRef` type for the reference.

```jsx
import { forwardRef } from 'react
import { Link } from '@lmc-eu/spirit-web-react';
import { PolymorphicRef } from '@lmc-eu/spirit-web-react/types';
type LinkProps<T extends ElementType = 'button'> = SpiritLinkProps<T, 'tertiary'>;
const CustomLinkRoot = <T extends ElementType = 'button'>(
props: LinkProps<T>,
ref: PolymorphicRef<T> // <-- Type `ref` prop with the `PolymorphicRef` here
): JSX.Element => (
<Link
ref={ref}
elementType="button"
{...props}
/>
);
export const CustomLink = forwardRef(CustomLinkRoot);
```
[dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color

0 comments on commit e7d8cda

Please sign in to comment.