import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
import { WithoutId, WithCustomId, WithEmptyId } from './withId.story';
import { withIdSource } from './story/source';

<Meta title="HoCs/withId" />

# withId

This Higher Order Component injects an SSR-friendly `id` prop to any given component. It's especially useful for class-based components where you need to connect a number of elements via aria attributes, yet `useId` hook is unavailable.

> **Please note:** this component will be eventually deprecated as we move away from the class components to function components, so use with care.

## Usage

Given a dummy `DescribedButtonProps` component, when wrapped in the `widthId` HoC…

<Source code={withIdSource} dark />

…it will be automatically provided with a generated `id` prop…

<Canvas of={WithoutId} language="tsx" />

…but it will also respect a custom `id`, if provided.

<Canvas of={WithCustomId} language="tsx" />

### Empty strings

The HTML spec considers [empty 'id' attributes as invalid](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute), and given that the main purpose of this HoC is to offer cross-element connectivity for accessibility purposes, any falsy value provided to the `id` prop for the wrapped component would most likely cause a fault.

Because of that, all falsy `id` prop values will be overridden by this HoC.

<Canvas of={WithEmptyId} language="tsx" />