Allow sanitized markup in toastr message area

.eslintrc

@@ -39,7 +39,7 @@
     "no-undef": 2,
     "no-undef-init": 2,
     "no-undefined": 0,
-    "no-unused-vars": 2,
+    "no-unused-vars": [2, { "argsIgnorePattern": "^_" }],
     "no-use-before-define": 2,
     "indent": [2, 2, {
       "SwitchCase": 1

CHANGELOG.md

@@ -1,3 +1,51 @@
+# v8.0.0
+Add support for redux 5 and react-redux 9
+Thanks to @printfn
+
+# v7.6.9
+Minimal improvements in functions isString and isBrowser
+Thanks to @cyber2017
+
+# v7.6.8
+Updated dependencies react@17
+Thanks to @Szabadember
+
+# v7.6.7
+Fixes: [#262]
+Thanks to @IgorGorbov
+
+# v7.6.6
+Fixes: [#269]
+Thanks to @uxtx
+
+# v7.6.4
+Fixes: [#238]
+
+`disableCloseButtonFocus` can be passed as a options in the toast methods in
+order to prevent the auto focus.
+
+# v7.6.1
+Fix `getState` is not a function
+
+# v7.6.0
+Now you can define the toastr state path via a function
+```
+<ReduxToastr
+    {...anotherProps}
+    getState={(state) => state.toastr} // This is the default
+/>
+```
+
+# v7.5.2
+[#245] Fix W3C validation errors
+
+# v7.4.10
+Allow latest react-redux as peer dependency
+[#230]
+
+# v7.4.9
+Fixies [#220]
+
 # 7.0.0
 
 # Breaking Changes 

README.md

@@ -66,6 +66,7 @@ import ReduxToastr from 'react-redux-toastr'
       newestOnTop={false}
       preventDuplicates
       position="top-left"
+      getState={(state) => state.toastr} // This is the default
       transitionIn="fadeIn"
       transitionOut="fadeOut"
       progressBar
@@ -161,7 +162,7 @@ const toastrOptions = {
   onHideComplete: () => console.log('HIDE: animation is done'),
   onCloseButtonClick: () => console.log('Close button was clicked'),
   onToastrClick: () => console.log('Toastr was clicked'),
-  showCloseButton: false, // true by default
+  showCloseButton: true, // false by default
   closeOnToastrClick: true, // false by default, this will close the toastr when user clicks on it
   component: ( // this option will give you a func 'remove' as props
     <MyCustomComponent myProp="myValue">
@@ -229,6 +230,18 @@ const toastrConfirmOptions = {
 toastr.confirm('Are you sure about that!', toastrConfirmOptions);
 ```
 
+You can add a manually specified CSS ID selector to the confirmation wrapper element by:
+
+- Including an `id` prop in the `toasterConfirmOptions` object:
+
+```javascript
+const toastrConfirmOptions = {
+  ...
+  id: 'my-custom-id'
+};
+toastr.confirm('Are you sure about that!', toastrConfirmOptions);
+```
+
 You can change the `ok` and `cancel` texts by:
 
 - Passing `confirmOptions` to the `ReduxToastr` component:
@@ -316,6 +329,19 @@ const toastrConfirmOptions = {
 
 toastr.confirm(null, toastrConfirmOptions); // pass null for message
 ```
+You can allow user to close confirm dialog by clicking in empty space
+
+- Passing `closeOnShadowClick` in the `toasterConfirmOptions` object:
+
+```javascript
+const toastrConfirmOptions = {
+  ...
+  closeOnShadowClick: true
+};
+
+toastr.confirm('You have timed out! Please log back in.', toastrConfirmOptions);
+```
+
 
 ### Avatar: in case you wanna use the same avatar as in the example
 [Avatar](https://github.com/diegoddox/react-redux-toastr/blob/master/development/Avatar.js)

development/Avatar.js

@@ -11,6 +11,6 @@ const styles = {
 
 export default () => (
   <div className="toastr-avatar" style={styles}>
-    <img src="./assets/jesus.jpg" style={{maxWidth: '105%'}}/>
+    <img src="./assets/jesus.jpg" alt="avatar" style={{maxWidth: '105%'}}/>
   </div>
 );

development/Menu.js

@@ -32,8 +32,8 @@ export default class Menu extends React.Component {
             'In the beginning was the word',
             'and the Word was with God, and the Word was God...',
             {
-              timeOut: 10000,
-              position: 'top-left',
+              timeOut: 2000,
+              position: 'top-right',
               progressBar: true,
               width: '300px'
             }

development/client.js

@@ -1,10 +1,12 @@
 'use strict';
 import React from 'react';
-import {render} from 'react-dom';
 import createStore from './store';
 import App from './App';
+import ReactDOM from "react-dom/client";
 
 const store = createStore();
-const target = document.getElementById('app');
+const root = ReactDOM.createRoot(document.getElementById("app"));
 
-render(<App store={store} />, target);
+root.render(
+    <App store={store} />
+);