tjrexer / react-notifications Goto Github PK

Hello,

thank you for the nice library! If I'm not wrong, when I include it I get the following error message in the console:

"NotificationContainer has a method called componentDidUnmount(). But there is no such lifecycle method. Did you mean componentWillUnmount()?"

As far as I see replacing:

componentDidUnmount with componentWillUnmount

will do the job ....

Could you check?

Salut
D063520

In order to get rid of remaining componentWillMount warnings, need to update react to v17.

Due to security issues, node-sass, webpack, & dependencies needs to be upgraded.

I'm using the library to indicate success and error based on ajax requests initiated by the user. I want to have a syncing notification when its in the middle of an ajax call that either turns into a success or error based on the result.

if you have multiple toaster, the rerender of the list of toaster reset timeout after each change (New toaster in or old toaster out).

**Reproduce bug **

    for (let i = 1; i < 10; i++) {
      NotificationManager.success('Success test ' + i, null, 1000);
    }

All toaster are remove in 5- 10 seconds instead of 1 second

Fix bug
on File

Change key in CSSTransition :

 const items = notifications.map((notification, i) => {
      const key = notification.id || new Date().getTime();
      return (
        <CSSTransition
          key={i} <===== this key need to be  key={key}
          classNames="notification"
          timeout={{ enter: enterTimeout, exit: leaveTimeout }}
        >
          <Notification
            key={key} <====== this key is useless
            type={notification.type}
            title={notification.title}
            message={notification.message}
            timeOut={notification.timeOut}
            onClick={notification.onClick}
            onRequestHide={this.handleRequestHide(notification)}
          />
        </CSSTransition>
      );
    });

On mobile safari, the icon is not working.

Instead of an icon, a rectangle appears.

Could you add please a prop that allows displaying a close button on the top right corner of the notification?

Thanks a lot

Unable to change the width of notification and content in the notification is overflowing.

Users have been asking for typescript support. @dhffdh provided help in previous comment. Update Readme with examples for typescript.

Original Issue

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of CSSTransitionGroupChild which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node

Add debounce functionality to prevent duplicate notifications from appearing.

Original Issue

I want to add some HTML to my notification text.

NotificationManager.warning('<a href="">hello</a> world');

Original Issue

This is a great library, I was wondering if there is an estimate for the next release?

Thanks!

Hello there!

In my tests I saw that enterTimeout and leaveTimeout don't reflect any change to the NotificationContainer component. Looking through the code I realized that this component just pass all it's props to the Notification component and it just don't use these props, cause the names there are different there.

Original Issue

Getting warning

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at Notification (http://localhost:3003/static/js/vendors~main.chunk.js:87799:5)
at Transition (http://localhost:3003/static/js/vendors~main.chunk.js:94322:30)
at CSSTransition (http://localhost:3003/static/js/vendors~main.chunk.js:93439:35)
at div
at TransitionGroup (http://localhost:3003/static/js/vendors~main.chunk.js:94891:30)
at div
at Notifications (http://localhost:3003/static/js/vendors~main.chunk.js:88565:5)
at NotificationContainer (http://localhost:3003/static/js/vendors~main.chunk.js:88060:5)
at div
at App (http://localhost:3003/static/js/main.chunk.js:196:1)
console. @ index.js:1
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
findHostInstanceWithWarning @ react-dom.development.js:25406
findDOMNode @ react-dom.development.js:26067
performEnter @ Transition.js:245
updateStatus @ Transition.js:228
componentDidMount @ Transition.js:172
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

I want to handle API success and error, i just call createNotification() function. But its not work without onClick event. Please tell me that, how can i solve this issue.

My example code: createNotification('success', 'Success Title', 5000);

How to change the font-family of the notification text?

Getting error: Module not found: Error: Can't resolve './fonts/notification.eot'

All my css is loaded this way (above). I tried doing this in my component (which I'd rather not do):

import 'react-notifications/lib/notifications.css'

But this only worked in development (not production). Using Rails 6 with webpacker.

Would love to be able to position the notification on different places on the screen e.g., TopLeft, TopRight, BottomLeft and BottomRIght.

The CSS of the repository uses the class .notification-leave to draw the exit animations. Some versions of react however use .notification-exit (and .notification-exit-active) as the exit animations. On these versions of react the exit animations do not work, the CSS is wrong, and the notifications leave by simply disappearing (which is pretty ugly).

I created a new React app using the standard create-react-template. I installed only react-notifications, and I was able to reproduce this error. You can see the error in https://github.com/goodyguts/react-notifs-issue

Additionally, I show how the animation can easily be brought back just by changing the CSS to say exit instead of leave. You can see it working on https://github.com/goodyguts/react-notifs-issue/tree/the-solution

Recommended fix: Add classes that say exit to the SCSS

Would be nice to have a prop to fire the callback also when the notifications times out.

React TransitionGroup is already updated. Here is a really old dep in use -
i checked the guid and changed the Notifications.js the use the TransistionGroup
would be nice to get it updated.

Thanks

Mirgation Guide:
https://github.com/reactjs/react-transition-group/blob/master/Migration.md

src/Notifications.js

import React from 'react';
import PropTypes from 'prop-types';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import classnames from 'classnames';
import Notification from './Notification';

class Notifications extends React.Component {
  static propTypes = {
    notifications: PropTypes.array.isRequired,
    onRequestHide: PropTypes.func,
    enterTimeout: PropTypes.number,
    leaveTimeout: PropTypes.number
  };

  static defaultProps = {
    notifications: [],
    onRequestHide: () => {
    },
    enterTimeout: 400,
    leaveTimeout: 400
  };

  handleRequestHide = notification => () => {
    const { onRequestHide } = this.props;
    if (onRequestHide) {
      onRequestHide(notification);
    }
  };

  render() {
    const { notifications, enterTimeout, leaveTimeout } = this.props;
    const className = classnames('notification-container', {
      'notification-container-empty': notifications.length === 0
    });

    const items = notifications.map((notification,i) => {
        const key = notification.id || new Date().getTime();
        return (
          <CSSTransition
            key={i}
            classNames="notification"
            timeout={{ enter: enterTimeout, exit: leaveTimeout }}
          >
          <Notification
            key={key}
            type={notification.type}
            title={notification.title}
            message={notification.message}
            timeOut={notification.timeOut}
            onClick={notification.onClick}
            onRequestHide={this.handleRequestHide(notification)}
          />
          </CSSTransition>
        );
      })
    return (
      <div className={className}>

        <TransitionGroup >
          {items}
        </TransitionGroup>
      </div>
    );
  }
}

export default Notifications;

I use react 16 and react-notifications V1.7.4. but never close any notifications after time out

entering transition is working, but leaving is not working as the examples provided

Provide a function to clear all notifications.

Original Issue

I cant get this working. My source code code wont recognise ReactNotifications object even though its being loaded in the index.html file. Ive tried restarting the react app makes no difference. Any help appreciated.

index.html

    <!-- react notifications UMD -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-notifications.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-notifications.js"></script>

mysource.js (every other line of source code working ok)

// UMD react notifications
export const NotificationContainer = window.ReactNotifications.NotificationContainer;
export const NotificationManager = window.ReactNotifications.NotificationManager;

result in browser:

Module../src/InteractiveMap.jsx
src/InteractiveMap.jsx:88
  85 | const geoWatchDiffThreshold = 0.001;
  86 | 
  87 | // UMD react notifications
> 88 | export const NotificationContainer = window.ReactNotifications.NotificationContainer;
  89 | export const NotificationManager = window.ReactNotifications.NotificationManager;
  90 | 
  91 | // a small component to clear local storage

I'm getting the following warnings in console.

Take a look at the gradual-migration-path

Is it possible to add title or content as HTML? To add clickable links, formatting, images etc. Do you have any plans to include this in the future?

thanks

This should be explained in the documentation.

1. Open the codepen link from this section
2. White screen, nothing happens. As well as any other react-notifications codepen examples.

It would be nice if the notification was read by screen readers when displayed.