Smoking hot React Notifications ๐Ÿ”ฅ

Overview

react-hot-toast - Try it out

NPM Version minzipped size Build Status

Smoking hot Notifications for React.
Lightweight, customizable and beautiful by default.

Website ยท Documentation ยท Twitter

Cooked by Timo Lins ๐Ÿ‘จโ€๐Ÿณ

Features

  • ๐Ÿ”ฅ Hot by default
  • ๐Ÿ”ฉ Easily Customizable
  • โณ Promise API - Automatic loader from a promise
  • ๐Ÿ•Š Lightweight - less than 5kb including styles
  • โœ… Accessible
  • ๐Ÿคฏ Headless Hooks - Create your own with useToaster()

Installation

With yarn

yarn add react-hot-toast

With NPM

npm install react-hot-toast

Getting Started

Add the Toaster to your app first. It will take care of rendering all notifications emitted. Now you can trigger toast() from anywhere!

import toast, { Toaster } from 'react-hot-toast';

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

Documentation

Find the full API reference on official documentation.

Comments
  • cant find variable document on React Native

    cant find variable document on React Native

    Hey,

    Iam trying to use this library inside react-native, however I keep getting

    Can't find variable: Document
    

    I have this notifcation component:

    import { MaterialIcons } from '@expo/vector-icons'
    import React, { useRef } from 'react'
    import { useToaster } from 'react-hot-toast'
    import { Animated, Text, View } from 'react-native'
    
    const Toast = ({ t, updateHeight, offset }) => {
      const fadeAnim = useRef(new Animated.Value(0.5)).current // Initial value for opacity: 0
      const posAnim = useRef(new Animated.Value(-80)).current // Initial value for opacity: 0
    
      React.useEffect(() => {
        Animated.timing(fadeAnim, {
          toValue: t.visible ? 1 : 0,
          duration: 300,
          useNativeDriver: true,
        }).start()
      }, [fadeAnim, t.visible])
    
      React.useEffect(() => {
        Animated.spring(posAnim, {
          toValue: t.visible ? offset : -80,
          useNativeDriver: true,
        }).start()
      }, [posAnim, offset, t.visible])
    
      return (
        <Animated.View
          pointerEvents='none'
          style={{
            position: 'absolute',
            left: 0,
            right: 0,
            zIndex: 9999,
            alignItems: 'center',
            opacity: fadeAnim,
            transform: [
              {
                translateY: posAnim,
              },
            ],
          }}>
          <View
            onLayout={(event) =>
              updateHeight(t.id, event.nativeEvent.layout.height)
            }
            style={{
              marginTop: 50,
              backgroundColor: t.type === 'success' ? '#4caf50' : '#f44336',
              maxWidth: '80%',
              borderRadius: 30,
              flexDirection: 'row',
              alignItems: 'center',
              paddingVertical: 8,
              paddingHorizontal: 12,
            }}
            key={t.id}>
            <MaterialIcons
              name={t.type === 'success' ? 'check-circle-outline' : 'error-outline'}
              size={24}
              color='white'
            />
            <Text
              style={{
                color: '#fff',
                padding: 4,
                flex: 1,
                textAlign: 'center',
              }}>
              {t.message}
            </Text>
          </View>
        </Animated.View>
      )
    }
    
    const Notification = () => {
      const { toasts, handlers } = useToaster()
    
      return (
        <View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
          }}>
          {toasts.map((t) => (
            <Toast
              key={t.id}
              t={t}
              updateHeight={handlers.updateHeight}
              offset={handlers.calculateOffset(t.id, {
                reverseOrder: false,
              })}
            />
          ))}
        </View>
      )
    }
    
    export default Notification
    

    and I use that instead of <Toaster />

    Apart from that the only imports I do look like this:

    import { toast } from 'react-hot-toast'
    
    bug 
    opened by BjoernRave 13
  • toast.custom leave animation does not play, and padding error

    toast.custom leave animation does not play, and padding error

    I can make this custom toast, and the "enter" animation plays, but the "leave" animation does not. When I click the button on the toast, there is a short delay and then the toast disappears without the animation.

    I have confirmed that the animations work, by using them on divs in a page.

    The second problem I have is that if I specify p-5 for padding, the padding becomes 0. However, p-4 works.

    Setup:

    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.7",
    "react-hot-toast": "^2.2.0",
    "next": "latest",
    

    my code to launch a toast

    return toast.custom((t) => (
      <div
        className={`${
          t.visible ? 'animate-enter' : 'animate-leave'
        } max-w-md bg-red-500 rounded flex`}
      >
        <div className="flex-1 w-0 p-4">
          <div className="flex items-center">
            <div><XCircleIcon className="h-8 w-8 text-white" aria-hidden="true" /></div>
            <div className="ml-3 text-white white-space-nowrap">
              {message}
            </div>
          </div>
        </div>
        <div className="flex border-l border-white">
          <button
            onClick={() => toast.dismiss(t.id)}
            className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-white font-medium focus:outline-none focus:ring-0"
          >
            Close
          </button>
        </div>
      </div>
    ), {
      duration:Infinity
    })
    

    tailwind config

    module.exports = {
      content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
      ],
      theme: {
        extend: {
          boxShadow: {
            't-sm': '0 -1px 2px 0 rgba(0, 0, 0, 0.05)',
            't-md': '0 -4px 6px -1px rgba(0, 0, 0, 0.1)',
            't-lg': '0 -10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
            't-xl': '0 -20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
            't-2xl': '0 -25px 50px -12px rgba(0, 0, 0, 0.25)',
            't-3xl': '0 -35px 60px -15px rgba(0, 0, 0, 0.3)',
          },
          animation: {
            enter: 'enter 200ms ease-out',
            leave: 'leave 200ms ease-in',
          },
          keyframes: {
            enter: {
              '0%': { transform: 'scale(0.9)', opacity: 0 },
              '100%': { transform: 'scale(1)', opacity: 1 },
            },
            leave: {
              '0%': { transform: 'scale(1)', opacity: 1 },
              '100%': { transform: 'scale(0.9)', opacity: 0 },
            },
            'slide-in': {
              '0%': { transform: 'translateY(-100%)' },
              '100%': { transform: 'translateY(0)' },
            },
          },
        },
      },
      plugins: [
        require('@tailwindcss/forms'),
        require('autoprefixer'),
      ],
    }
    
    opened by clam61 8
  • set z index

    set z index

    I am currently using the modals provided by react semantic ui. There is a prop for a modal which makes the blurred. (https://react.semantic-ui.com/modules/modal/).

    When I use it, my toasts won't appear, they are "behind" the blurred content. Is there a way to set the z index on the toasts or make them available up front?

    opened by gmwill934 8
  • Warning validateDOMNesting in case toast message contains <div>

    Warning validateDOMNesting in case toast message contains

    Got warning in Chrome: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. with material-ui's <Alert> inside toast message (or any other div)

    Possible solution: replace 'p' with 'div' https://github.com/timolins/react-hot-toast/blob/9045f1ca73f7ec5301dc5a7bbea4a19f106384c0/src/components/toast-bar.tsx#L39

    bug 
    opened by ambroseus 8
  • Toast height calculation bug

    Toast height calculation bug

    Example: https://codesandbox.io/s/react-hot-toast-responsive-position-forked-64f33?file=/src/App.js

    Screen Shot 2021-11-17 at 3 38 38 PM

    When you use the toast ID to change one toast to another (e.g. from loading to success), sometimes the height of the toast is off. I think it's because it's not updating the height of the toast container when the content changed.

    (As always, thank you for this great lib!)

    bug 
    opened by danqing 7
  • Infinite duration does not work, toasts dismiss instantly

    Infinite duration does not work, toasts dismiss instantly

    Hey! I saw this PR https://github.com/timolins/react-hot-toast/pull/37 and tried out a duration of Infinity, but it is just causing the toast to dismiss instantly.

    I've put together a CodeSandbox that reproduces the behavior. Any ideas?

    https://codesandbox.io/s/pedantic-framework-c3v0x?file=/src/App.js

    opened by garand 7
  • Loading toast is removed before resolving the promise.

    Loading toast is removed before resolving the promise.

    I noticed a weird behavior when running a promise that takes fairly long (about 30s) the loading toast is automatically dismissed even before resolving the promise, when it's resolved the success toast appears.

    Can you reproduce this? Try having a promise that takes about 30 or 40 seconds to execute.

    toast.promise(subtitlesPromise, {
      loading: 'Generating your subtitles, please wait...',
      success: 'Subtitles generated!',
      error: 'Error generating subtitles.',
    });
    

    Thanks Timo for this awesome library!

    bug 
    opened by iamanas20 7
  • Unwanted peer dependency message

    Unwanted peer dependency message

    When installing react-hot-toast (or running npm install in a project that already has react-hot-toast) the following warning is shown:

    npm WARN [email protected] requires a peer of [email protected]^2.6.2 but none is installed. You must install peer dependencies yourself.

    Documentation says nothing about need of csstype.

    Maybe react-hot-toast should make it regular dependency if it's needed?

    On the other note, there are users, who are using just headless mode, and they don't need neither goober or csstype.

    opened by hudochenkov 7
  • Does not work with Preact

    Does not work with Preact

    Hi, I was trying out the plugin and the basic 'Getting Started' code fails to launch the toast for me.

    I verified that the component renders properly, but it seems like the toast function is failing silently. Is there a way to turn on debug/error messages so that I can figure out what's going on?

    Here's the full code I used for reference:

    import React from 'react';
    
    import toast, { Toaster } from 'react-hot-toast';
    const notify = () => toast('Here is your toast.');
    
    const App = () => {
      return (
        <div>
          <button onClick={notify}>Make me a toast</button>
          <Toaster />
        </div>
      );
    };
    
    export default App;
    
    bug 
    opened by timuster 7
  • Fix auto-remove not working in toast.dismiss()

    Fix auto-remove not working in toast.dismiss()

    The toast.dismiss(toastId) function didn't work as intended (Auto-remove after 1 second by default).

    The DOM tree of toast bars persist until the end of duration which would block the background elements during the time span. It's more noticeably if you have a long duration.

    Screenshot 2020-12-30 at 11 57 01 AM
    opened by yj-ang 7
  • Reduced motion detected incorrectly for iOS

    Reduced motion detected incorrectly for iOS

    The animations are in reduced motion mode in iOS Chrome(tested on iPhone 11 and 12, iOS 14), even when reduced motion is turned off from accessebility settings. It works great on Safari

    bug

    opened by nickisaacs 6
  • <Toaster /> component in higher order component or layout file

    component in higher order component or layout file

    Hello, i wanna achieve placing only 1 line in my layout file, is it possible? Because for now i must put component in each file that want to use toast() to be functional.

    Expected:

    <main
        className={`${hideTopNavbar ? "mb-[80px]" : "mt-[45px] mb-[80px]"}`}
    >
        <Toaster>
            {children}
        </Toaster>
    </main>
    
    opened by ilhamgum 0
  • Add documentation to the toast.custom section explaining that custom toasts need the pointer-events: auto CSS property

    Add documentation to the toast.custom section explaining that custom toasts need the pointer-events: auto CSS property

    Background

    By default, the Toaster provider fills the entire viewport (see screenshot below).

    Screen Shot 2022-11-25 at 12 22 02 pm

    In order to allow background UI elements (i.e. elements in the entire app) to be clicked on, the Toaster provider has pointer-events: none which makes click events pass-through to whatever elements are in the background.

    The problem

    If you have a custom toast, the Toaster provider's pointer-events: none will prevent click events on your custom toast. This is not a problem with the default success/error toasts because pointer-events: auto is set here for the default toasts.

    However, if you're making your own custom toast using the toast.custom() API, you have to add pointer-events: auto to your custom toast so that the custom Toast can be clicked on. This wasn't obvious to me at first.

    Suggestion

    I recommend we update these docsto add:

    Note: If your custom notification needs to respond to click events, you will need to add the `pointer-events: auto` css property to your custom toast.
    

    Thanks ๐Ÿ‘

    opened by shenders13 0
  • forward additional data to toastOptions

    forward additional data to toastOptions

    Hello. Thanks for this library. Nice to use.

    It would also be more convenient to be able to pass the date through the options

    For example

    toast('message', { data: { title: 'Bar', callback: () => { console.log('clicked)' }}})
    

    This will be very handy for custom components with variable designs.

    opened by popuguytheparrot 0
  • Feature request: Sticky toasts

    Feature request: Sticky toasts

    Stick toast to their extreme start positions, probably by adding a sticky: true option to the toast (or toast.sticky() to the API). Useful when you want a toast to always retain the first position in the toast stack.

    opened by zignis 0
  • Allow to pass a plain error

    Allow to pass a plain error

    Feature request: allow to pass a plain Error instance to toastr.error() (and maybe to toastr() itself) that will properly display it as an error. IMHO this code looks intuitive enough but it wouldn't work right now:

    toastr(new Error("my error"));   // Does not work
    toastr.error(new Error("my error"));   // Also does not work
    

    Edit: a big advantage of this is that you'd be able to simplify promise handling like:

    mypromise.then(...).catch(toastr);  // First case
    mypromise.then(...).catch(toastr.error);  // Second case
    

    Could be as easy as a well situated:

    // Before
    const toast = (message: Message, opts?: ToastOptions) =>
      createHandler('blank')(message, opts);
    
    // After
    const toast = (message: Message, opts?: ToastOptions) => {
      if (message instanceof Error) {
        return createHandler('error')(message.message, opts);
      }
      return createHandler('blank')(message, opts);
    };
    

    Or handling it lower in the chain, so that any toastr.[whatever](new Error(...)) becomes an .error(...) type:

    // Before
    const createHandler =
      (type?: ToastType): ToastHandler =>
      (message, options) => {
        const toast = createToast(message, type, options);
        dispatch({ type: ActionType.UPSERT_TOAST, toast });
        return toast.id;
      };
    
    // After
    const createHandler =
      (type?: ToastType): ToastHandler =>
      (message, options) => {
        if (message instanceof Error) {
          type = 'error';
          mesage = message.message;
        }
        const toast = createToast(message, type, options);
        dispatch({ type: ActionType.UPSERT_TOAST, toast });
        return toast.id;
      };
    
    opened by franciscop 0
  • Dismiss click passes event through and causes Modal to close incorrectly

    Dismiss click passes event through and causes Modal to close incorrectly

    ISSUE When a Modal is rendered using HeadlessUI React, and a toast is dismissed manually by clicking on the X button, it causes the modal to close as well.

    DEMO Codesandbox: https://codesandbox.io/s/react-hot-toast-headlessui-modal-2c9t27?file=/src/Modal.js

    STEPS TO REPRODUCE

    1. Click "Open Modal" button
    2. Click button to trigger toast
    3. Click X button on toast to dismiss it
    4. Both toast AND modal will close. The onClose handler on the Modal is being called, and this seems like a bug

    EXPECTED BEHAVIOR Only the toast should close, NOT the modal.

    Using React 17 and the latest version of react-hot-toast.

    May or may not be related to #164

    opened by uicrafts 0
Releases(v2.4.0)
  • v2.4.0(Sep 3, 2022)

    What's new

    • Allow change of of toast heights โ€“ Fixes #133
    • Fix infinite loop during unit testing 1dcb2f2 โ€“ (Thanks silvenon)
    • Add testing setup 82afa93 โ€“ (Thanks silvenon)
    • Restructure handlers for better memoization ec653ec
    • Use MutationObserver for height changes 9eddc26

    https://github.com/timolins/react-hot-toast/compare/v2.3.0...v2.4.0-beta.0

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Jul 12, 2022)

    Better bundle setup

    This release focuses on build and bundle improvements (faster, lighter & better).

    • Expose react-hot-toast/headless - for headless environments like react-native
    • Bundle is now 15% (5% gzipped) smaller
    • Bonus: 3x faster dev builds

    What's Changed

    • Improve dev setup (pnpm, update deps) by @timolins in https://github.com/timolins/react-hot-toast/pull/203
    • New bundler setup (tsup instead of tsdx) with react-hot-toast/headless by @timolins in https://github.com/timolins/react-hot-toast/pull/205
    • Website Example: Make snippet consistent with action by @diksown in https://github.com/timolins/react-hot-toast/pull/196
    • Docs: update version 2 page custom render api code example by @AnishDe12020 in https://github.com/timolins/react-hot-toast/pull/175
    • fix: csstype peer dep by @eeston in https://github.com/timolins/react-hot-toast/pull/183
    • Site Docs: 'one' => 'once' :) by @cbserra in https://github.com/timolins/react-hot-toast/pull/201
    • Website Example: Make snippet consistent with action by @diksown in https://github.com/timolins/react-hot-toast/pull/196

    New Contributors

    • @AnishDe12020 made their first contribution in https://github.com/timolins/react-hot-toast/pull/175
    • @eeston made their first contribution in https://github.com/timolins/react-hot-toast/pull/183
    • @cbserra made their first contribution in https://github.com/timolins/react-hot-toast/pull/201
    • @diksown made their first contribution in https://github.com/timolins/react-hot-toast/pull/196

    Full Changelog: https://github.com/timolins/react-hot-toast/compare/v2.2.0...v2.3.0

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0-beta.1(Jul 9, 2022)

    Update package setup to be ESM compliant

    • Use .mjs extension for ESM module - Update package.json according to #204 ae4a1eb
    • Use main in package.json de10f5c
    • Update entry file in tsup config e63de48

    Clean Up

    • Add automatic tsconfig update from Next.js 8c149db
    • Rename index.tsx to index.ts 0749440
    • Remove prepare script 3b9ef79

    https://github.com/timolins/react-hot-toast/compare/v2.3.0-beta...v2.3.0-beta.1

    Source code(tar.gz)
    Source code(zip)
  • v2.3.0-beta(Jul 8, 2022)

    This version is focus on improving the build & bundle setup. It's now using tsup (powered by esbuild) instead of unmaintained tsdx. Additionaly, npm v4 was replaced by pnpm.

    Those changes gives us a way faster and simpler builds + should allows usage in headless environments again (react-native).

    • Use pnpm instead of old NPM - Resolves dependency linking ๐Ÿš€ #186 b46a386
    • Remove tsdx & add prettier hook * No more linting from tsdx. Should be okay to use prettier * Lot less dependencies * Prettify files 28d83a9
    • Use export type for types 4f43ea3
    • Use tsup instead of tsdx This gives us more control about the build process * Expose react-hot-toast/headless - Fixes #39 * Bundle size is even smaller now d58cb35
    • Add pnpm to size check action 9da3b6e
    • Migrate docs to MDX 2 f776144
    • Align site for React 18 & Tailwind 3 8b716de
    • fix: missing csstype peer dep 30bdaf5

    https://github.com/timolins/react-hot-toast/compare/v2.2.0...v2.3.0-beta

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Jan 4, 2022)

    Changes

    • Expose core types 70dbbb2
    • Update goober 1563b56
    • Preserve line breaks in toast body Closes #144 f981e45

    Docs

    • Fix example in docs 09ded7f
    • Fix typo 379cf3e
    • Add missing import to example fbb2612
    • Fix typo in Toaster page c93328a

    https://github.com/timolins/react-hot-toast/compare/v2.1.1...v2.2.0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Aug 24, 2021)

    • fix: matchMedia is not defined 46cc577

    • Make the page title match the component name e510767

    • Fix linting error b1d2382

    • Merge pull request #115 from BenJenkinson/patch-1 0027e31

    • Merge pull request #112 from Dev-CasperTheGhost/main ddc56b0

    https://github.com/timolins/react-hot-toast/compare/v2.1.0...v2.1.1

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Jul 31, 2021)

    Changes

    • Expose Toast type - Closes #91 b9c2d93
    • Merge pull request #99 from jlalmes/export-icons d7a335e

    Docs

    • Prevent script from running twice f594e2e
    • Rollback default icon exports made by release 2.0 e81cc38
    • Add position option to toast docs 9b481f0
    • Merge branch 'main' of https://github.com/timolins/hot-toast 69cd7fe
    • Use proxy for realtime counter afe3405
    • Add description to package.json 864a77c
    • Merge pull request #87 from ruisaraiva19/main 81ec4e4
    • fix(aria): use new ariaProps property 274dd7b
    • Add realtime counter to website 25a0703

    https://github.com/timolins/react-hot-toast/compare/v2.0.0...v2.1.0

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(May 31, 2021)

    New

    • Easier Customization
      • Create your own toast renderer (without useToaster)
        • Support for custom render function in Toaster
        • Support for custom render function in ToastBar
      • toast.custom() - Render custom one-off toasts. No default styling will be applied.
    • Per toast positioning
    • New exit animation
    • Change the gutter between toasts with <Toaster gutter={20} />
    • Support for relative positioning
    • Respect reduce motion OS setting
    • Create persistent toasts with duration: Infinity

    Breaking Changes

    • Use the top, right, bottom, left to in containerStyle to change the offset, instead of margin
    • Loading toasts no longer disappear after 30 seconds
    • role & ariaLive got moved into ariaProps
    • useToaster() no longer exposes visibleToasts
    • No longer expose dispatch

    Changes

    • Add rehype-slug for same page linking d182844
    • Update docs for 2.0 release 7587f5e
    • Clean up keyframe strings 013deef
    • Add fade animation to reduce motion 8057bb3
    • docs: fix typo on custom toaster e448a6e
    • fix(toast-bar): use fragment to remove unique key prop error 6c89e91
    • fix: remove unused import 809fa25
    • Update docs for 2.0 b2f4611
    • CSS fix for IE b650ea0
    • Add tailwind animation for examples cfbf32a
    • Fix sticky nav in docs 03d75e9
    • Use activeClass for pointer events 2036a3f
    • Use children instead of render prop 8388051
    • Extract default offset to variable ff9a762
    • Use flexbox for toast positioning 9381c26
    • Expose gutter prop 273e29e
    • Reduce custom toast duration to 4 seconds 466825d
    • Scope aria props and add render function support f1d367c
    • Add reduce motion support Closes #34 0363011
    • Footer (fix year) 1b2e82a
    • Use dynamic year in footer 6639eea
    • Allow position to be configured per toast 80e936f
    • Fix invalid types/imports 664bcbf
    • Refactor Indicator to ToastIcon component - Also export resolveValue to render custom JSX content 25690e0
    • Add support for toast.custom - Render any JSX without additional styles b7509bd
    • Use React.CSSProperties instead csstype e58d6a8
    • Add containerClassName prop - Closes #43 2be3b23
    • Add support for per toast position - Breaking: Remove visibleToasts - Rename margin to gutter 345aac0
    • Add renderToast option to Toatser - Allows you to replace default toast with custom component (Closes #13) 207bf66
    • Set sideEffects: false in package.json 641369f
    • Breaking: No longer expose dispatch 8f82fec
    • Update goober & add csstype as dev dependency Closes #44 d60adb6
    • Improve animations and exit positioning - Hidden toasts now stay at their position - Use percentages instead of px for animation 396db8b
    • Change toast positioning to absolute 781b16f
    • Move height ref to <Toaster/> 06e271c
    • Update use-toaster.mdx 1ed8c8e
    • Increase default duration from loading toasts to Infinity Fixes #45 633cb6f
    • Keep track of dismissed toasts 176bc05
    • Fix typo in Toaster docs cf1fd4c
    • Fix a typo e1c68b6
    • fix spelling error 619b508
    • Update footer link d30d2e4
    • Use Infinity instead of -1 for persistant toasts a214271
    • Remove dismiss from example 597a17d
    • Allow -1 duration for persistent toasts 64b5568
    • Fix undefined id e40ebbd
    • Positioning wrapper div gets no pointer events b441274
    • Move comment in toaster.mdx b0a1da4
    • add missing className to example with all available options 4239b66
    • Add missing goober setup b43caa1
    • Lift position wrapper to Toaster aa3c0c6

    https://github.com/timolins/react-hot-toast/compare/v1.0.2...v2.0.0

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.0(May 16, 2021)

    • Add tailwind animation for examples cfbf32a
    • Fix sticky nav in docs 03d75e9
    • Use activeClass for pointer events 2036a3f
    • Use children instead of render prop 8388051
    • Extract default offset to variable ff9a762
    • Use flexbox for toast positioning 9381c26
    • Expose gutter prop 273e29e
    • Reduce custom toast duration to 4 seconds 466825d
    • Scope aria props and add render function support f1d367c
    • Add reduce motion support Closes #34 0363011
    • Merge remote-tracking branch 'origin/main' into dev 39f85aa
    • Merge pull request #72 from timurmaio/main ad291cf
    • Footer (fix year) 1b2e82a
    • Use dynamic year in footer 6639eea
    • Allow position to be configured per toast 80e936f
    • Merge branch 'main' into dev 1a584db
    • Fix invalid types/imports 664bcbf
    • Refactor Indicator to ToastIcon component - Also export resolveValue to render custom JSX content 25690e0
    • Add support for toast.custom - Render any JSX without additional styles b7509bd
    • Use React.CSSProperties instead csstype e58d6a8
    • Add containerClassName prop - Closes #43 2be3b23
    • Add support for per toast position - Breaking: Remove visibleToasts - Rename margin to gutter 345aac0
    • Add renderToast option to Toatser - Allows you to replace default toast with custom component (Closes #13) 207bf66
    • Set sideEffects: false in package.json 641369f
    • Breaking: No longer expose dispatch 8f82fec
    • Update goober & add csstype as dev dependency Closes #44 d60adb6
    • Improve animations and exit positioning - Hidden toasts now stay at their position - Use percentages instead of px for animation 396db8b
    • Merge branch 'lift-position-wrapper' into dev 41aac06
    • Change toast positioning to absolute 781b16f
    • Merge pull request #53 from timolins/clear-timeouts 351e62a
    • Move height ref to <Toaster/> 06e271c
    • Update use-toaster.mdx 1ed8c8e
    • Merge branch 'lift-position-wrapper' into dev 2d52e4e
    • Merge branch 'clear-timeouts' into dev 8a3ac8c
    • Merge branch 'infinity-loading' into dev 3836611
    • Merge pull request #49 from gr-qft/patch-1 2b8f7c1
    • Increase default duration from loading toasts to Infinity Fixes #45 633cb6f
    • Keep track of dismissed toasts 176bc05
    • Merge pull request #52 from tmcw/patch-1 1609cc6
    • Fix typo in Toaster docs cf1fd4c
    • Fix a typo e1c68b6
    • Merge pull request #48 from domenicrosati/patch-1 bfa5129
    • fix spelling error 619b508
    • Merge pull request #37 from timolins/persistent-toast 3e2c069
    • Merge pull request #35 from hudochenkov/fix-id 8cd1535
    • Update footer link d30d2e4
    • Use Infinity instead of -1 for persistant toasts a214271
    • Remove dismiss from example 597a17d
    • Allow -1 duration for persistent toasts 64b5568
    • Fix undefined id e40ebbd
    • Merge pull request #32 from Kilian/patch-2 67bdc5b
    • Positioning wrapper div gets no pointer events b441274
    • Merge pull request #30 from Kilian/patch-1 854c4e2
    • Move comment in toaster.mdx b0a1da4
    • add missing className to example with all available options 4239b66
    • Merge remote-tracking branch 'origin/main' into lift-position-wrapper 802fe9e
    • Add missing goober setup b43caa1
    • Lift position wrapper to Toaster aa3c0c6

    https://github.com/timolins/react-hot-toast/compare/v1.0.2...v2.0.0-beta.0

    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Jan 21, 2021)

    Bug Fixes

    • Fix Preact support a452643 - Thanks @cristianbote
    • Remove unused action type 9f0891a
    • Move dismiss logic back to toast - Use toast.dismiss() inside th useToaster auto-dimiss logic 4a4760d
    • Refactor the duplicate dismiss function 254a0bb
    • Fix auto-remove not working in toast.dismiss() d58446b
    • Use div instead of p to prevent nesting error - Closes #5 e76370d
    • Add proper return type to store 7e4391d
    • No longer pass options to toast bar 15d5606
    • Fix duration options order 0531024
    • Lift defaults merging from UI to store - This makes all defaults work in headless mode aswell - Removes complexity from UI 8269ad7

    https://github.com/timolins/react-hot-toast/compare/v1.0.1...v1.0.2

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Dec 21, 2020)

    Bug Fixes

    • Respect options in useToaster
    • Fix default durations passed on 2cb8c2d
    • Make options in calculateOffset optional

    Misc

    • Add missing size-limit dependencies 3fac8e0
    • Merge pull request #3 from yak613/main a532775
    • fixed typo in site sample e7f5d31
    • Add repo & keywords to package.json a3d7ef1
    • Improve docs + add React Native example b4b4dac
    • Typo 3d7bb9a
    • Add feature list to README 45818e3
    • Fix link in docs 897b111
    • Style fixes in header bf728ff

    https://github.com/timolins/react-hot-toast/compare/v1.0.0...v1.0.1

    Source code(tar.gz)
    Source code(zip)
Owner
Timo Lins
Code, Design & Video
Timo Lins
:postbox: A simple and customizable React notifications system

Reapop A simple and customizable React notifications system Summary Compatibility Demo Installation Integration & usage With React & Redux With React

Louis Barranqueiro 1.3k Nov 16, 2022
Spec compliant notifications for react and material ui users

react-materialui-notifications โค๏ธ the package? Then โญ it! Spec compliant notifications for react and material ui users Installation Use the latest git

Puranjay Jain 252 Jan 6, 2022
sAlert is a React component which provides alerts or notifications with rich configuration possibilities.

This lib is no longer maintained. It needs major adjustments and rewrites. I hope I'll find some time for it in the future. Sorry. React sAlert compon

Julian ฤ†wirko 658 Sep 6, 2022
A simple but flexible implementation of toast style notifications for React extracted from Sancho UI.

Toasted-notes A simple but flexible implementation of toast style notifications for React extracted from Sancho UI. View the demo and documentation. F

Ben McMahen 256 Nov 11, 2022
Simple snackbar-style notifications for React

react-snackbar-alert Simple snackbar-style notifications for React Prerequisites React Snackbar Alert requires React 16.8.0 or newer and styled-compon

Joe Attardi 28 Jul 15, 2022
react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner

?? react-notification-timeline react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner. It i

Tapas Adhikary 117 Nov 9, 2022
Next.js Deploy Notifications

Next.js Deploy Notifications This library lets your users know when you've deployed a new version of your Next.js application. import { useHasNewDeplo

Ryan Toronto 20 Oct 31, 2022
Customizable Toast Notifications for SolidJS

Create beautiful, customizable toasts in SolidJS. StackBlitz Demo Features Easily Customizable Promise API Lightweight Accessible Installation With ya

Aryan Deora 285 Nov 30, 2022
react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitter and a React component.

react-redux-toastr demo react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitt

Diego Oliveira 754 Nov 29, 2022
This is a wrapper of the 'React' library 'React-Toastify' for usage in Shiny applications.

shinyToastify This is a wrapper of the 'React' library 'React-Toastify' for usage in Shiny applications. Six available types: The toast container and

null 9 Apr 28, 2022
React Toast Component - Custom push notification (Toast) implementation under React + stayed by TailwindCSS.

React Toast Component Online Demo Description This is custom toast component implemented by react hooks + React Context API and stayled using tailwind

Dalibor Kundrat 73 Sep 24, 2022
Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons

Cogo Toast Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons) https://cogoport.github.io/cogo-toast/ Install vi

Cogoport 667 Nov 24, 2022
Delightful and highly customisable React Component to notify your users

react-notifications-component A delightful, easy to use and highly configurable component to help you notify your users out of the box. No messy setup

Rares Mardare 1.2k Dec 4, 2022
React notification made easy ๐Ÿš€ !

React-Toastify ?? React-Toastify allows you to add notifications to your app with ease. No more nonsense! Installation $ npm install --save react-toas

Fadi Khadra 10.1k Dec 3, 2022
๐Ÿž A toast notification system for react

React Toast Notifications A configurable, composable, toast notification system for react. https://jossmac.github.io/react-toast-notifications Install

Joss Mackison 2.2k Nov 20, 2022
Tiny React.js notification library (1kb gzip).

Simple-React-Notifications Tiny library (only 1kb gzip) that allows you to add notifications to your app. We don't want to blow up our bundle size bec

Alex 60 Aug 5, 2022
A performant and comprehensive React sticky component.

A sticky component wraps a sticky target and keeps the target in the viewport as the user scrolls the page. Most sticky components handle the case where the sticky target is shorter than the viewport, but not the case where a sticky target is taller than the viewport

Yahoo 1.1k Nov 25, 2022
Small library for notifying react components.

Small library for notifying react components. Sometimes you need to notify another components about some event that happens in application. With this library you are able to notify components also from redux.

Jakub Blunรกr 5 Jul 20, 2022
React Notification System

React Notification System A complete and totally customizable component for notifications in React. Initially built for Eterpret @ Scalable Path. Inst

Igor Prado 2.4k Nov 29, 2022