Skip to content

gino/toast

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

37 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

toast ๐Ÿž

Version Top language Stars Contributors License

A lightweight easy-to-use toast library

Installation

yarn add @gino/toast
npm install @gino/toast

Basic usage

  1. You must wrap your App component with our ToastProvider to access the required context.
import { ToastProvider } from "@gino/toast"

<ToastProvider>
  <Component {...pageProps} />
</ToastProvider>
  1. To create a toast, simply use the toast function exported from the useToast hook.
const { toast } = useToast();

<button
  onClick={() => {
    toast("This is my toast");
  }}
>
  Add toast
</button>

Rendering toasts

We have made this library as flexibile as possible. In order to render toasts, you can simply map over the toasts array that is exported by the useToasts hook.

const { toasts, removeToast } = useToast();

return (
  <ul>
    {toasts.map((toast) => (
      <li key={toast.id}>
        <div>{toast.message}</div>
        <button onClick={() => removeToast(toast.id)}>Close toast</button>
      </li>
    ))}
  </ul>
)

Making toasts disappear after a certain time

To make toasts disappear after a certain amount of time, we have created a useToastTimer hook that easily handles all this functionality for you. To see this feature in action, please refer to our example project.

import { useToastTimer } from "@gino/toast"

const ref = useToastTimer<HTMLDivElement>(toast.id, {
  duration: 3,
  pauseOnHover: true,
});

return (
  <div ref={ref}>
    <div>This toast will disappear after 3 seconds unless I'm being hovered</div>
  </div>
)

This library is a headless toast library that does not include any styling or animations. You are free to add those yourself or copy an example of how it could be used.

About

๐Ÿž A lightweight easy-to-use toast library

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published