Registry / devops / react-awesome-toasts

react-awesome-toasts

library0.0.9jsnpmunverified

A lightweight (5kb gzipped) React toast notification library with automanaged queue and built-in accessibility. Current stable version is 0.0.9 (April 2020). It wraps your app with a ToastProvider and exposes toast.show() and toast.hide() via HOC or render props. Includes TypeScript definitions, customizable position, timeout, and presentational components. Compared to alternatives like react-toastify, it's smaller with less configuration but fewer built-in variants and no built-in animations.

devops

npm install react-awesome-toasts

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-AWESOME-TOAS

react-awesome-toasts

devopsjavascriptv0.0.9

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ToastProvider

✓ import { ToastProvider } from 'react-awesome-toasts'

✗ import ToastProvider from 'react-awesome-toasts'

Named import only; no default export.

withToast

✓ import { withToast } from 'react-awesome-toasts'

✗ import withToast from 'react-awesome-toasts'

HOC that adds `toast` prop.

ToastConsumer

✓ import { ToastConsumer } from 'react-awesome-toasts'

✗ import ToastConsumer from 'react-awesome-toasts'

Render props component.

Shows how to wrap an app with ToastProvider, use withToast HOC, and trigger a toast with show().

import React from 'react'; import { ToastProvider, withToast } from 'react-awesome-toasts'; const App = () => ( <ToastProvider timeout={3000} position="top-right"> <MyButton /> </ToastProvider> ); const MyButton = withToast(({ toast }) => { const handleClick = () => { toast.show({ text: 'Item saved!', actionText: 'Undo', ariaLabel: 'Item saved, click to undo', onActionClick: toast.hide, }); }; return <button onClick={handleClick}>Show Toast</button>; }); export default App;

Debug

Known issues

gotchaThe package does not work with React 17+ due to a peer dependency on react ^16.6.0 and lack of updates since April 2020.

fix

Use a fork or consider alternatives like react-toastify that support React 18.

affects: >=0.0.9

gotchaCustom presentational components must handle accessibility (focus management, screen reader announcements) themselves.

fix

Either reuse the default Toast component or implement similar aria-live, focus restoration, and keyboard interaction.

affects: >=0.0.0

deprecatedThe `position` prop accepts string values but does not validate them; passing an invalid value silently fails with no default fallback.

fix

Use one of the supported positions: 'top-right', 'bottom-right', 'top-left', 'bottom-left', 'top-center', 'bottom-center'.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'show')

Using withToast on a component that is not inside a ToastProvider.

fix

Wrap the component tree with <ToastProvider> before using withToast.

Module not found: Can't resolve 'react-awesome-toasts'

Package not installed or import path misspelled.

fix

Run `npm install react-awesome-toasts` and ensure import path is correct: `import { ToastProvider } from 'react-awesome-toasts'`.

Upgrade

Version history

0.0.9latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/BananaBobby/react-awesome-toasts ↗

packagereact-awesome-toasts ↗

homepagehttps://github.com/BananaBobby/react-awesome-toasts ↗