トースト

一時的に表示される簡潔なメッセージです。

import * as React from 'react';
import * as Toast from '@radix-ui/react-toast';
import './styles.css';

const ToastDemo = () => {
  const [open, setOpen] = React.useState(false);
  const eventDateRef = React.useRef(new Date());
  const timerRef = React.useRef(0);

  React.useEffect(() => {
    return () => clearTimeout(timerRef.current);
  }, []);

  return (
    <Toast.Provider swipeDirection="right">
      <button
        className="Button large violet"
        onClick={() => {
          setOpen(false);
          window.clearTimeout(timerRef.current);
          timerRef.current = window.setTimeout(() => {
            eventDateRef.current = oneWeekAway();
            setOpen(true);
          }, 100);
        }}
      >
        Add to calendar
      </button>

      <Toast.Root className="ToastRoot" open={open} onOpenChange={setOpen}>
        <Toast.Title className="ToastTitle">Scheduled: Catch up</Toast.Title>
        <Toast.Description asChild>
          <time className="ToastDescription" dateTime={eventDateRef.current.toISOString()}>
            {prettyDate(eventDateRef.current)}
          </time>
        </Toast.Description>
        <Toast.Action className="ToastAction" asChild altText="Goto schedule to undo">
          <button className="Button small green">Undo</button>
        </Toast.Action>
      </Toast.Root>
      <Toast.Viewport className="ToastViewport" />
    </Toast.Provider>
  );
};

function oneWeekAway(date) {
  const now = new Date();
  const inOneWeek = now.setDate(now.getDate() + 7);
  return new Date(inOneWeek);
}

function prettyDate(date) {
  return new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'short' }).format(date);
}

export default ToastDemo;

特徴

自動的に閉じます。

ホバー、フォーカス、ウィンドウのぼかしで閉じるのを一時停止します。

トーストビューポートにジャンプするホットキーをサポートします。

スワイプジェスチャーによるクローズをサポートします。

スワイプジェスチャーアニメーション用のCSS変数を公開します。

制御することも、制御しないこともできます。

インストール

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

npm install @radix-ui/react-toast

構造

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

import * as Toast from '@radix-ui/react-toast';

export default () => (
  <Toast.Provider>
    <Toast.Root>
      <Toast.Title />
      <Toast.Description />
      <Toast.Action />
      <Toast.Close />
    </Toast.Root>

    <Toast.Viewport />
  </Toast.Provider>
);

APIリファレンス

プロバイダー

トーストとトーストビューポートをラップするプロバイダーです。通常はアプリケーションをラップします。

プロパティ	型	デフォルト
`duration`	`数値`	`5000`
`label*`	`文字列`	`"通知"`
`swipeDirection`	`列挙型`	`"右"`
`swipeThreshold`	`数値`	`50`

ビューポート

トーストが表示される固定領域です。ユーザーはホットキーを押すことでビューポートにジャンプできます。キーボードユーザーがホットキーを発見できるようにするのは、あなたの責任です。

プロパティ	型	デフォルト
`asChild`	`真偽値`	`false`
`hotkey`	`文字列の配列`	`["F8"]`
`label`	`文字列`	`"通知({hotkey})"`

ルート

自動的に閉じるトーストです。ユーザーの応答を取得するために開いたままにするべきではありません。

プロパティ	型	デフォルト
`asChild`	`真偽値`	`false`
`type`	`列挙型`	`"フォアグラウンド"`
`duration`	`数値`	デフォルト値なし
`defaultOpen`	`真偽値`	`true`
`open`	`真偽値`	デフォルト値なし
`onOpenChange`	`関数`	デフォルト値なし
`onEscapeKeyDown`	`関数`	デフォルト値なし
`onPause`	`関数`	デフォルト値なし
`onResume`	`関数`	デフォルト値なし
`onSwipeStart`	`関数`	デフォルト値なし
`onSwipeMove`	`関数`	デフォルト値なし
`onSwipeEnd`	`関数`	デフォルト値なし
`onSwipeCancel`	`関数`	デフォルト値なし
`forceMount`	`真偽値`	デフォルト値なし

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-swipe]`	`"start" \|"move" \|"cancel" \|"end"`
`[data-swipe-direction]`	`"up" \|"down" \|"left" \|"右"`

CSS変数	説明
`--radix-toast-swipe-move-x`	水平方向にスワイプしたときのトーストのオフセット位置
`--radix-toast-swipe-move-y`	垂直方向にスワイプしたときのトーストのオフセット位置
`--radix-toast-swipe-end-x`	水平方向にスワイプした後のトーストのオフセット終了位置
`--radix-toast-swipe-end-y`	垂直方向にスワイプした後のトーストのオフセット終了位置

タイトル

トーストのオプションのタイトルです。

プロパティ	型	デフォルト
`asChild`	`真偽値`	`false`

説明

トーストメッセージです。

プロパティ	型	デフォルト
`asChild`	`真偽値`	`false`

アクション

ユーザーが時間制限の結果として予期しない副作用を伴うタスクを完了することをユーザーに期待させないようにするために、無視しても安全なアクションです。

ユーザーの応答が必要な場合は、AlertDialogをトーストとしてスタイルして、ビューポートに表示します。

プロパティ	型	デフォルト
`asChild`	`真偽値`	`false`
`代替テキスト*`	`文字列`	デフォルト値なし

閉じる

ユーザーがトーストの表示時間が経過する前にトーストを消すことができるボタンです。

プロパティ	型	デフォルト
`asChild`	`真偽値`	`false`

例

カスタムホットキー

keycode.infoの各キーのevent.code値を使用して、デフォルトのホットキーをオーバーライドします。

<Toast.Provider>
  {/* ... */}
  <Toast.Viewport hotkey={['altKey', 'KeyT']} />
</Toast.Provider>

カスタム時間

トーストの時間をカスタマイズして、プロバイダーの値を上書きします。

<Toast.Root duration={3000}>
  <Toast.Description>Saved!</Toast.Description>
</Toast.Root>

重複するトースト

ユーザーがボタンをクリックするたびにトーストを表示する必要がある場合は、状態を使用して同じトーストの複数のインスタンスをレンダリングします（下記参照）。あるいは、一部を抽象化して独自の命令型 APIを作成することもできます。

export default () => {
  const [savedCount, setSavedCount] = React.useState(0);

  return (
    <div>
      <form onSubmit={() => setSavedCount((count) => count + 1)}>
        {/* ... */}
        <button>save</button>
      </form>

      {Array.from({ length: savedCount }).map((_, index) => (
        <Toast.Root key={index}>
          <Toast.Description>Saved!</Toast.Description>
        </Toast.Root>
      ))}
    </div>
  );
};

スワイプジェスチャーのアニメーション

// index.jsx
import * as Toast from '@radix-ui/react-toast';
import './styles.css';

export default () => (
  <Toast.Provider swipeDirection="right">
    <Toast.Root className="ToastRoot">...</Toast.Root>
    <Toast.Viewport />
  </Toast.Provider>
);

/* styles.css */
.ToastRoot[data-swipe='move'] {
  transform: translateX(var(--radix-toast-swipe-move-x));
}
.ToastRoot[data-swipe='cancel'] {
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.ToastRoot[data-swipe='end'] {
  animation: slideRight 100ms ease-out;
}

@keyframes slideRight {
  from {
    transform: translateX(var(--radix-toast-swipe-end-x));
  }
  to {
    transform: translateX(100%);
  }
}

アクセシビリティ

aria-live要件に準拠しています。

感度

typeプロパティを使用して、スクリーンリーダーのトーストの感度を制御します。

ユーザーアクションの結果であるトーストの場合は、foregroundを選択します。バックグラウンドタスクから生成されるトーストは、backgroundを使用する必要があります。

フォアグラウンド

フォアグラウンドトーストはすぐに通知されます。支援技術では、フォアグラウンドトーストが表示されると、以前にキューに入れられたメッセージをクリアすることを選択する場合があります。同時に異なるフォアグラウンドトーストをスタックすることは避けてください。

バックグラウンド

バックグラウンドトーストは、次の適切な機会、たとえば、スクリーンリーダーが現在の文の読み取りを完了したときに通知されます。キューに入れられたメッセージはクリアされないため、ユーザーの操作に応じて使用すると、スクリーンリーダーのユーザーにとってはラグのあるユーザーエクスペリエンスとして認識される可能性があります。

<Toast.Root type="foreground">
  <Toast.Description>File removed successfully.</Toast.Description>
  <Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

<Toast.Root type="background">
  <Toast.Description>We've just released Radix 1.0.</Toast.Description>
  <Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

代替アクション

トーストを操作する代替方法をスクリーンリーダーのユーザーに指示するには、ActionのaltTextプロパティを使用します。

ユーザーをアプリケーション内の永続的な場所に誘導してアクションを実行したり、独自のカスタムホットキーロジックを実装したりできます。後者を実装する場合は、foregroundタイプを使用してすぐに通知し、ユーザーに十分な時間を与えるために時間を長くしてください。

<Toast.Root type="background">
  <Toast.Title>Upgrade Available!</Toast.Title>
  <Toast.Description>We've just released Radix 1.0.</Toast.Description>
  <Toast.Action altText="Goto account settings to upgrade">
    Upgrade
  </Toast.Action>
  <Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

<Toast.Root type="foreground" duration={10000}>
  <Toast.Description>File removed successfully.</Toast.Description>
  <Toast.Action altText="Undo (Alt+U)">
    Undo <kbd>Alt</kbd>+<kbd>U</kbd>
  </Toast.Action>
  <Toast.Close>Dismiss</Toast.Close>
</Toast.Root>

閉じるアイコンボタン

アイコン（またはフォントアイコン）を提供する場合は、スクリーンリーダーのユーザー向けに正しくラベルを付けることを忘れないでください。

<Toast.Root type="foreground">
  <Toast.Description>Saved!</Toast.Description>
  <Toast.Close aria-label="Close">
    <span aria-hidden>×</span>
  </Toast.Close>
</Toast.Root>

キーボード操作

キー	説明
`F8`	トーストのビューポートにフォーカスを当てます。
`Tab`	フォーカスを次のフォーカス可能な要素に移動します。
`Shift + Tab`	フォーカスを前のフォーカス可能な要素に移動します。
`Space`	フォーカスが`Toast.Action`上にある場合、または `Toast.Close`上にある場合、トーストを閉じます。
`Enter`	フォーカスが`Toast.Action`上にある場合、または `Toast.Close`上にある場合、トーストを閉じます。
`Esc`	フォーカスが`Toast`上にある場合、トーストを閉じます。

カスタムAPI

抽象化された部分

プリミティブな部分を独自のコンポーネントに抽象化して、独自のAPIを作成します。

使用法

import { Toast } from './your-toast';

export default () => (
  <Toast title="Upgrade available" content="We've just released Radix 3.0!">
    <button onClick={handleUpgrade}>Upgrade</button>
  </Toast>
);

実装

// your-toast.jsx
import * as ToastPrimitive from '@radix-ui/react-toast';

export const Toast = ({ title, content, children, ...props }) => {
  return (
    <ToastPrimitive.Root {...props}>
      {title && <ToastPrimitive.Title>{title}</ToastPrimitive.Title>}
      <ToastPrimitive.Description>{content}</ToastPrimitive.Description>
      {children && (
        <ToastPrimitive.Action asChild>{children}</ToastPrimitive.Action>
      )}
      <ToastPrimitive.Close aria-label="Close">
        <span aria-hidden>×</span>
      </ToastPrimitive.Close>
    </ToastPrimitive.Root>
  );
};

命令型 API

必要に応じて、トーストの複製を可能にする独自の命令型APIを作成します。

使用法

import { Toast } from './your-toast';

export default () => {
  const savedRef = React.useRef();
  return (
    <div>
      <form onSubmit={() => savedRef.current.publish()}>
        {/* ... */}
        <button>Save</button>
      </form>
      <Toast ref={savedRef}>Saved successfully!</Toast>
    </div>
  );
};

実装

// your-toast.jsx
import React from 'react';
import * as ToastPrimitive from '@radix-ui/react-toast';

export const Toast = React.forwardRef((props, forwardedRef) => {
  const { children, ...toastProps } = props;
  const [count, setCount] = React.useState(0);

  React.useImperativeHandle(forwardedRef, () => ({
    publish: () => setCount((count) => count + 1),
  }));

  return (
    <>
      {Array.from({ length: count }).map((_, index) => (
        <ToastPrimitive.Root key={index} {...toastProps}>
          <ToastPrimitive.Description>{children}</ToastPrimitive.Description>
          <ToastPrimitive.Close>Dismiss</ToastPrimitive.Close>
        </ToastPrimitive.Root>
      ))}
    </>
  );
});

前へタブ

次へトグル

GitHubでこのページを編集してください。

概要

ガイド

コンポーネント

ユーティリティ

トースト

特徴

フォアグラウンド

バックグラウンド

使用法

実装

使用法

実装