Pikas UI

@pikas-ui/toast

This package contains a toast component that can be used to display notifications.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/toast

yarn add @pikas-ui/toast

pnpm add @pikas-ui/toast

Usage

ToastProvider

This component is used to provide the toast context.

Props

Prop	Description	Type	Default
`children`	The content of the component.	`ReactNode`	-
`duration`	The duration of the toast.	`number`	`5000`
`label`	The label of the toast provider.	`string`	`"Notification'`
`css`	The css of the toast provider.	`PikasCSS`	-
`swipeThreshold`	The swipe threshold of the toast.	`number`	-
`width`	The width of the toast.	`number`	`400`
`position`	The position of the toast.	`ToastPosition`	`"top'`
`closeWithSwipe`	Enable or disable the swipe to close.	`boolean`	`true`
`viewport`	The viewport of the toast provider.	`ToastProviderViewport`	`{ hotkey: ['F8'], label: 'Notifications ({hotkey})' }`

Toast

This component is used to display a toast. It is used by the useToast hook.

import { Toast, useToast, ToastProvider } from '@pikas-ui/toast';

const Child: React.FC = () => {
  const toast = useToast();

  const handleClick = () => {
    toast.publish(
      <Toast title="Title" description="Description" variant="success" />
    );
  };

  return <button onClick={handleClick}>Show toast</button>;
};

const Parent: React.FC = () => {
  return (
    <ToastProvider position="top-right">
      <Child />
    </ToastProvider>
  );
};

Props

Prop	Description	Type	Default
`css`	Custom css of the custom toast	`DefaultToastCSS`	-
`children`	Children of the custom toast	`ReactNode`	-
`duration`	Duration of the custom toast	`number`	`5000`
`onOpenChange`	Callback when the custom toast is open or close	`(open: boolean) => void`	-
`action`	Action of the custom toast	`ToastAction`	-
`type`	Type of the custom toast	`ToastType`	`"foreground"`
`onEscapeKeyDown`	Callback when the custom toast is escape key down	`(event: KeyboardEvent) => void`	-
`onSwipeStart`	Callback when the custom toast is swipe start	`(event: SwipeEvent) => void`	-
`onSwipeMove`	Callback when the custom toast is swipe move	`(event: SwipeEvent) => void`	-
`onSwipeEnd`	Callback when the custom toast is swipe end	`(event: SwipeEvent) => void`	-
`onPause`	Callback when the custom toast is pause	`() => void`	-
`onResume`	Callback when the custom toast is resume	`() => void`	-
`forceMount`	Force mount the custom toast	`true or undefined`	-
`hasCloseButton`	Has close button the custom toast	`boolean`	-
`timer`	Has timer the custom toast	`boolean`	`true`
`title`	Title of the custom toast	`string`	-
`description`	Description of the custom toast	`string`	-
`variant`	Variant of the custom toast	`ToastVariant`	`"info"`
`width`	Width of the custom toast	`number or string`	`"auto"`
`maxWidth`	Max width of the custom toast	`number or string`	`"100%"`
`height`	Height of the custom toast	`number or string`	`"auto"`

DefaultToast

This component is used to display a default toast. It is used by the useToast hook.

import { DefaultToast, useToast, ToastProvider } from '@pikas-ui/toast';
import type { IconProps } from '@pikas-ui/icons';
import { IconByName } from '@pikas-ui/icons';

const IconExample: React.FC<IconProps> = (props) => {
  return <IconByName {...props} name="bx:baguette" />;
};

const Child: React.FC = () => {
  const toast = useToast();

  const handleClick = () => {
    toast.publish(
      <DefaultToast
        title="Title"
        description="Description"
        Icon={IconExample}
      />
    );
  };

  return <button onClick={handleClick}>Show toast</button>;
};

const Parent: React.FC = () => {
  return (
    <ToastProvider position="top-right">
      <Child />
    </ToastProvider>
  );
};

Props

Prop	Description	Type	Default
`css`	Custom css of the custom toast	`DefaultToastCSS`	-
`children`	Children of the custom toast	`ReactNode`	-
`duration`	Duration of the custom toast	`number`	`5000`
`onOpenChange`	Callback when the custom toast is open or close	`(open: boolean) => void`	-
`action`	Action of the custom toast	`ToastAction`	-
`type`	Type of the custom toast	`ToastType`	`"foreground"`
`onEscapeKeyDown`	Callback when the custom toast is escape key down	`(event: KeyboardEvent) => void`	-
`onSwipeStart`	Callback when the custom toast is swipe start	`(event: SwipeEvent) => void`	-
`onSwipeMove`	Callback when the custom toast is swipe move	`(event: SwipeEvent) => void`	-
`onSwipeEnd`	Callback when the custom toast is swipe end	`(event: SwipeEvent) => void`	-
`onPause`	Callback when the custom toast is pause	`() => void`	-
`onResume`	Callback when the custom toast is resume	`() => void`	-
`forceMount`	Force mount the custom toast	`true or undefined`	-
`hasCloseButton`	Has close button the custom toast	`boolean`	-
`timer`	Has timer the custom toast	`boolean`	`true`
`title`	Title of the custom toast	`string`	-
`description`	Description of the custom toast	`string`	-
`Icon`	Icon of the custom toast	`FC<IconProps>`	-
`width`	Width of the custom toast	`number or string`	`"auto"`
`maxWidth`	Max width of the custom toast	`number or string`	`"100%"`
`height`	Height of the custom toast	`number or string`	`"auto"`

CustomToast

This component is used to display a custom toast. It is used by the useToast hook.

import { CustomToast, useToast, ToastProvider } from '@pikas-ui/toast';

const Child: React.FC = () => {
  const toast = useToast();

  const handleClick = () => {
    toast.publish(<CustomToast>Hello world</CustomToast>);
  };

  return <button onClick={handleClick}>Show toast</button>;
};

const Parent: React.FC = () => {
  return (
    <ToastProvider position="top-right">
      <Child />
    </ToastProvider>
  );
};

Props

Prop	Description	Type	Default
`css`	Custom css of the custom toast	`CustomToastCSS`	-
`children`	Children of the custom toast	`ReactNode`	-
`duration`	Duration of the custom toast	`number`	`5000`
`onOpenChange`	Callback when the custom toast is open or close	`(open: boolean) => void`	-
`action`	Action of the custom toast	`ToastAction`	-
`type`	Type of the custom toast	`ToastType`	`"foreground"`
`onEscapeKeyDown`	Callback when the custom toast is escape key down	`(event: KeyboardEvent) => void`	-
`onSwipeStart`	Callback when the custom toast is swipe start	`(event: SwipeEvent) => void`	-
`onSwipeMove`	Callback when the custom toast is swipe move	`(event: SwipeEvent) => void`	-
`onSwipeEnd`	Callback when the custom toast is swipe end	`(event: SwipeEvent) => void`	-
`onPause`	Callback when the custom toast is pause	`() => void`	-
`onResume`	Callback when the custom toast is resume	`() => void`	-
`forceMount`	Force mount the custom toast	`true or undefined`	-
`hasCloseButton`	Has close button the custom toast	`boolean`	-
`timer`	Has timer the custom toast	`boolean`	`true`
`width`	Width of the custom toast	`number or string`	`"auto"`
`maxWidth`	Max width of the custom toast	`number or string`	`"100%"`
`height`	Height of the custom toast	`number or string`	`"auto"`

Contributing

This documentation can be edited on GitHub here