{"id":15210,"library":"react-redux-toastr","title":"React Redux Toastr","description":"react-redux-toastr provides a robust toastr-style notification system for React applications, deeply integrating with Redux for state management. The current stable version is 8.0.0, published approximately two years ago, indicating a maintenance phase rather than active, rapid development. While the 7.x series saw several minor updates, the jump to v8 brought no explicit breaking changes documented in its changelog for the library's core API, focusing on compatibility and stability. This library differentiates itself by managing all toast notification states within the Redux store, ensuring a centralized and predictable approach. It offers extensive customization for notification positioning, animation transitions, and progress indicators, and uses an event emitter pattern for triggering toasts from any part of the application. It requires explicit Redux reducer integration and a root-level component for rendering notifications.","status":"maintenance","version":"8.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/diegoddox/react-redux-toastr","tags":["javascript","React.js","React","Redux","react","redux toastr","react-redux-toastr","react-component","toastr"],"install":[{"cmd":"npm install react-redux-toastr","lang":"bash","label":"npm"},{"cmd":"yarn add react-redux-toastr","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-redux-toastr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for type checking React component props.","package":"prop-types","optional":false},{"reason":"Core React library for UI components.","package":"react","optional":false},{"reason":"Connects React components to a Redux store.","package":"react-redux","optional":false},{"reason":"State management library for Redux store and reducer.","package":"redux","optional":false}],"imports":[{"note":"This is the default export for the main component.","wrong":"const ReduxToastr = require('react-redux-toastr')","symbol":"ReduxToastr","correct":"import ReduxToastr from 'react-redux-toastr'"},{"note":"The reducer is a named export, typically aliased as 'toastrReducer' when combined with other reducers.","wrong":"import { toastrReducer } from 'react-redux-toastr'","symbol":"reducer","correct":"import { reducer as toastrReducer } from 'react-redux-toastr'"},{"note":"The `toastr` emitter for triggering notifications is a named export from the main package.","wrong":"import toastr from 'react-redux-toastr/lib/toastr'","symbol":"toastr","correct":"import { toastr } from 'react-redux-toastr'"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { createStore, combineReducers } from 'redux';\nimport { Provider } from 'react-redux';\nimport ReduxToastr, { reducer as toastrReducer, toastr } from 'react-redux-toastr';\n\n// Import CSS styles (mandatory)\nimport 'react-redux-toastr/lib/css/react-redux-toastr.min.css';\n\n// 1. Add the reducer to your Redux store\nconst rootReducer = combineReducers({\n  // ... other reducers ...\n  toastr: toastrReducer // <- Mounted at 'toastr' by default\n});\n\nconst store = createStore(rootReducer);\n\n// 2. Create a component to trigger toasts\nconst MyAppComponent = () => {\n  return (\n    <div>\n      <h1>Welcome to React Redux Toastr Demo</h1>\n      <button onClick={() => toastr.success('Success!', 'This is a success message.')}>\n        Show Success Toast\n      </button>\n      <button onClick={() => toastr.info('Info', 'This is an information message.')}>\n        Show Info Toast\n      </button>\n      <button onClick={() => toastr.error('Error', 'Something went wrong!', { timeOut: 0 })}>\n        Show Error Toast (no timeout)\n      </button>\n      <button onClick={() => toastr.confirm('Are you sure?', {\n        onOk: () => console.log('Confirmed'),\n        onCancel: () => console.log('Cancelled')\n      })}>\n        Show Confirm Toast\n      </button>\n    </div>\n  );\n};\n\n// 3. Render the ReduxToastr component at your app root\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  <Provider store={store}>\n    <MyAppComponent />\n    <ReduxToastr\n      timeOut={4000}\n      newestOnTop={false}\n      preventDuplicates\n      position=\"top-right\"\n      getState={(state) => state.toastr} // Default, can be customized\n      transitionIn=\"fadeIn\"\n      transitionOut=\"fadeOut\"\n      progressBar\n      closeOnToastrClick\n    />\n  </Provider>\n);\n","lang":"javascript","description":"This quickstart demonstrates how to set up `react-redux-toastr` by adding its reducer to the Redux store, rendering the `ReduxToastr` component at the application root, and triggering various toast messages (success, info, error, confirm) using the `toastr` emitter."},"warnings":[{"fix":"Add `import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';` to your main application entry file or ensure the SCSS file is processed by your build system.","message":"The CSS styles for `react-redux-toastr` are not automatically included and must be explicitly imported in your project for the toast messages to render correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your reducer is `toastr: toastrReducer` or set `<ReduxToastr getState={(state) => state.yourCustomKey} />` if using a different mount point.","message":"By default, the `toastr` reducer expects to be mounted under the key `toastr` in your root Redux store (e.g., `state.toastr`). If you mount it under a different key, you must pass the `getState` prop to the `ReduxToastr` component to specify the correct path.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consult the `react-redux` v8 migration guide (e.g., for React 18 compatibility) and ensure your `react-redux` and `react` versions are compatible.","message":"While `react-redux-toastr` v8.0.0 did not explicitly list breaking changes in its own changelog from v7, a key peer dependency, `react-redux` v8, introduced breaking changes for React 18 compatibility, notably requiring the `useSyncExternalStore` hook. Users upgrading to `react-redux` v8 should be aware of its own migration path.","severity":"breaking","affected_versions":">=8.0.0 (for react-redux)"},{"fix":"Review your CSS for `toastr` class names and adjust `confirm` configurations to use global `ReduxToastr` transition props.","message":"Version 7.0.0 introduced breaking changes including adding a CSS prefix to all styles and removing `transitionIn` and `transitionOut` options directly from `confirm` methods, consolidating animation control at the main `ReduxToastr` component level.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Be mindful that global transition settings will apply to confirms. Custom component options for confirms might offer more granular control if needed.","message":"The `transitionIn` and `transitionOut` props applied to the `ReduxToastr` component globally affect the animation of confirm dialogs as well, which might not always be the desired behavior if different animations are expected for toasts versus confirms.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `toastr: toastrReducer` is present in your `combineReducers` call, or configure `<ReduxToastr getState={(state) => state.yourCustomKey} />` if using a custom state path.","cause":"The `react-redux-toastr` reducer is either not mounted in the Redux store or is mounted under a different key than 'toastr' without the `getState` prop being set.","error":"TypeError: Cannot read properties of undefined (reading 'toastr')"},{"fix":"Add `import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';` to your application's entry point (e.g., `index.js` or `App.js`).","cause":"The required CSS styles (`react-redux-toastr.min.css`) have not been imported or are not correctly loaded by the application's build system.","error":"Toastr messages are dispatched but not visible on the screen, or appear unstyled."},{"fix":"Ensure `import { toastr } from 'react-redux-toastr';` is present in any file attempting to call `toastr.success()`, `toastr.info()`, etc.","cause":"The `toastr` emitter utility was not correctly imported before being used.","error":"ReferenceError: toastr is not defined"}],"ecosystem":"npm"}