{"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.","language":"javascript","status":"maintenance","last_verified":"Tue Apr 21","install":{"commands":["npm install react-redux-toastr"],"cli":null},"imports":["import ReduxToastr from 'react-redux-toastr'","import { reducer as toastrReducer } from 'react-redux-toastr'","import { toastr } from 'react-redux-toastr'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}