react-redux-toastr

import React from 'react'; import ReactDOM from 'react-dom/client'; import { createStore, combineReducers } from 'redux'; import { Provider } from 'react-redux'; import ReduxToastr, { reducer as toastrReducer, toastr } from 'react-redux-toastr'; // Import CSS styles (mandatory) import 'react-redux-toastr/lib/css/react-redux-toastr.min.css'; // 1. Add the reducer to your Redux store const rootReducer = combineReducers({ // ... other reducers ... toastr: toastrReducer // <- Mounted at 'toastr' by default }); const store = createStore(rootReducer); // 2. Create a component to trigger toasts const MyAppComponent = () => { return ( <div> <h1>Welcome to React Redux Toastr Demo</h1> <button onClick={() => toastr.success('Success!', 'This is a success message.')}> Show Success Toast </button> <button onClick={() => toastr.info('Info', 'This is an information message.')}> Show Info Toast </button> <button onClick={() => toastr.error('Error', 'Something went wrong!', { timeOut: 0 })}> Show Error Toast (no timeout) </button> <button onClick={() => toastr.confirm('Are you sure?', { onOk: () => console.log('Confirmed'), onCancel: () => console.log('Cancelled') })}> Show Confirm Toast </button> </div> ); }; // 3. Render the ReduxToastr component at your app root const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Provider store={store}> <MyAppComponent /> <ReduxToastr timeOut={4000} newestOnTop={false} preventDuplicates position="top-right" getState={(state) => state.toastr} // Default, can be customized transitionIn="fadeIn" transitionOut="fadeOut" progressBar closeOnToastrClick /> </Provider> );