概要

はじめに

アクセシビリティ

リリース

ガイド

コンポーネント

（コンポーネント一覧 - 各コンポーネント名を日本語に翻訳：アコーディオン、アラートダイアログ、アスペクト比、アバター、チェックボックス、折りたたみ可能、コンテキストメニュー、ダイアログ、ドロップダウンメニュー、フォーム、ホバーカード、ラベル、メニューバー、ナビゲーションメニュー、ポップオーバー、進捗、ラジオグループ、スクロールエリア、選択、セパレータ、スライダー、スイッチ、タブ、トースト、トグル、トグルグループ、ツールバー、ツールチップ）

ユーティリティ

（ユーティリティ一覧 - 各ユーティリティ名を日本語に翻訳：アクセス可能なアイコン、アナウンス、方向プロバイダー、IDプロバイダー、ポリモーフィック、ポータル、スロット、視覚的に非表示）

ポリモーフィック

強く型付けされたポリモーフィックコンポーネントを作成します。

このパッケージは、asChild プロパティを支持して非推奨となりました。レンダリングされる要素を変更する方法については、こちらをご覧ください。

機能

`as` プロパティに基づいた型付けされた属性

`as` プロパティに基づいた型付けされたプロパティ

`as` プロパティに基づいた型付けされたイベント

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-polymorphic

インポート

コンポーネントをインポートします。

import type * as Polymorphic from '@radix-ui/react-polymorphic';

基本的な例

ポリモーフィックな Box コンポーネントを作成します。

import React from 'react';
import type * as Polymorphic from '@radix-ui/react-polymorphic';

type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', {}>;

const Box = React.forwardRef(({ as: Comp = 'div', ...props }, forwardedRef) => (
  <Comp {...props} ref={forwardedRef} />
)) as PolymorphicBox;

export default () => (
  <Box>
    <Box as="h1">This is a h1</Box>
    <Box as="button">This is a button</Box>
  </Box>
);

API リファレンス

ForwardRefComponent

ポリモーフィックな as プロパティの型を forwardRef コンポーネントに追加します。

Polymorphic.ForwardRefComponent<
  keyof JSX.IntrinsicElements,
  OwnProps
>

OwnProps には DOM 属性を含めないでください。これらは自動的に追加されます。既存のポリモーフィックコンポーネントからこれらを抽出するには、Polymorphic.OwnProps ユーティリティを使用してください。

使用方法

Polymorphic.ForwardRefComponent<
  'button',
  { variant: 'solid' | 'outline' }
>

OwnProps

ポリモーフィックコンポーネントから DOM プロパティを除くプロパティを抽出します。

Polymorphic.OwnProps<
  Polymorphic.ForwardRefComponent
>;

使用方法

Polymorphic.OwnProps<typeof Button>;
// { variant: 'solid' | 'outline' }

IntrinsicElement

ポリモーフィックコンポーネントから JSX.IntrinsicElements キーを抽出します。

Polymorphic.IntrinsicElement<
  Polymorphic.ForwardRefComponent
>;

使用方法

Polymorphic.IntrinsicElement<typeof Button>;
// 'button'

例

ポリモーフィックコンポーネントの拡張

上記のユーティリティを組み合わせて、ポリモーフィックコンポーネントを独自のカスタムコンポーネントでラップするときにポリモーフィズムを維持します。

import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import type * as Polymorphic from '@radix-ui/react-polymorphic';

type PolymorphicDialogContent = Polymorphic.ForwardRefComponent<
  Polymorphic.IntrinsicElement<typeof Dialog.Content>,
  Polymorphic.OwnProps<typeof Dialog.Content> & {
    size?: 'small' | 'large';
  }
>;

const DialogContent = React.forwardRef(
  ({ size = 'small', ...props }, forwardedRef) => (
    <Dialog.Content {...props} className={size} ref={forwardedRef} />
  )
) as PolymorphicDialogContent;

export default () => (
  <Dialog.Root>
    <Dialog.Trigger>Open</Dialog.Trigger>
    <Dialog.Overlay />
    <DialogContent as="article">
      <p>This is an article</p>
    </DialogContent>
  </Dialog.Root>
);

前へID プロバイダー

次へポータル

GitHubでこのページを編集する