@highlight-ui/toast NPM | npm.io

6.3.9 • Published 8 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

8 months ago

@highlight-ui/toast

Using npm:

npm install @highlight-ui/toast

Using yarn:

yarn add @highlight-ui/toast

Using pnpm:

pnpm install @highlight-ui/toast

In your (S)CSS file:

@import url('@highlight-ui/toast');

Once the package is installed, you can import the library:

import { toaster, ToastProps } from '@highlight-ui/toast';

Usage

import React from 'react';
import { toaster } from '@highlight-ui/toast';
import { Button } from '@highlight-ui/button';

export default function ToastExample() {
  return (
    <Button
      onClick={() => {
        toaster.notify({
          ...restArgs,
          variant,
          children: `I am a toast`,
        });
      }}
    >
      Open toast
    </Button>
  );
}

Props 📜

Prop	Type	Required	Default	Description
`children`	`React.ReactNode`	Yes		The content of the toast
`className`	`string`	No		Allows providing a custom class name
`actions`	`React.ReactNode`	No		A fragment with buttons that will be rendered at the bottom of the toast
`autoClose`	`boolean`	No	`true`	Specify whether the toast should auto close after the duration time ends
`duration`	`number`	No	`5000`	Duration in milliseconds that the toast remains visible
`id`	`string`	No		The ID of the toast
`isVisible`	`boolean`	No	`true`	Specify whether the toast is visible
`onClose`	`() => void`	No		A callback when the toast is closed
`onOpen`	`() => void`	No		A callback when the toast is open
`onRequestToClose`	`() => void`	No		A callback when the user request the toast to be closed
`onRequestToRemove`	`() => void`	No		A callback when the user request the toast to be removed
`showCloseButton`	`boolean`	No	`true`	Specify whether the close button should be rendered
`variant`	`"highlight", "success", "warning", "critical"`	No	`highlight`	Defines which variant of the Toast to render

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.

@highlight-ui/button @highlight-ui/icon @highlight-ui/typography @highlight-ui/utils-commons @highlight-ui/utils-portal-manager

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @zalastax/nolb-_hig

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago