teodosii / react-notifications-component Goto Github PK

First, thanks for the cool module.

I want to generate an event when I click on the notification.
What can I do to trigger an event?

I am getting a react unique key error. I do have two questions about that.
Could we use some library like UUID to generate unique keys, instead of using the item.id?
Another thing that I also notice is that even after the element is not showing on the screen anymore it still on the dom.
I would be more than happy to send a PR.

https://github.com/teodosii/react-notifications-component/blob/master/src/react-notification-component.js#L204

How can I add custom contents like the success message with icon ?
I can only ad the 5 types (danger,success,etc...)

Hi!
I need to be change notification color according to my app theme color. I didn't see any props or style in documentation to change color.

Thanks

Swiping to close notification with touch not working in [email protected]

I am try to invoke addNotification in forEach when I get notifies from server, but on the screen i saw only one notify. I think problem in setState method (https://github.com/teodosii/react-notifications-component/blob/master/src/react-notification-component.js#L113) that used in addNotification method. May be you need to pass function as argument in setState and use prevState.notifications.data?

I want to call my function when user clicks the notification. I tried onNotificationRemoval but is not working. Please, if you know some way i can achieve this, let me know asap :/

store.addNotification({
         title: message.firstName + " is inviting you to play",
         message: "Click here to accept",
         type: "default",
         insert: "top",
         width: 400,
         container: "top-right",
         animationIn: ["animated", "fadeIn"],
         animationOut: ["animated", "fadeOut"],
         onNotificationRemoval: () => this.onAcceptInvitation(message)
       });

The component works but no styling is being applied.

It would be nice if we implemented this functionality by default: https://zeit.co/design/toasts, what do you think?

This is useful when you want to override the styling of the notification containers using something like styled-components without relying on .css files. For example, if you pass the className, you can do the following:

const StyledContainer = styled(ReactNotification)`
	.react-notification-root .notification-item {
		box-shadow: none;
	}
`

but styled-components rely on the component passing the classname to the underlying tag.

Hello,

I have imported the .css for styling, but no animation yet. The .css file does not have style for animation.

I notice there is a .js.map file, which might relate to the command line npm run build:library:dev. Running this command causes error.

How can I build this file?

One more thing, in https://teodosii.github.io/react-notifications-component/, the example does not import the .css file like the doc on this Github page. This should be note on top that the .css needs to be imported for new developers get it working quickly.

Currently, on swiping, bottom notifications are removed using both horizontal and vertical sliding, which looks weird.

This could be fix either by:

• waiting for horizontal sliding to get out the viewport - easily done by setting delay
• relative positioning for all above notifications to be pushed over current notification, while current being removed to be moved only horizontally, not vertically

Thanks for this really awesome library :).

The pauseOnHover feature works as expected when we dont have a content option in the store.addNotification call.
I am trying to make the pauseOnHover feature work for a custom notification content.

Here is a codesandbox link.

Can you let me know if I am missing something?

hi
when i use your awesome package in nextjs (npm run dev) and i open the site with ssr. i get below error and page can not be loaded.

ReferenceError: window is not defined at /var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:1355:2 at /var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:1344:46 at module.exports../node_modules/style-loader/lib/addStyles.js.module.exports (/var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:1412:88) at Object../src/scss/notification.scss (/var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:2853:137) at __webpack_require__ (/var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:21:30) at Module../src/react-notification-component.js (/var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:2164:81) at __webpack_require__ (/var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:21:30) at /var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:85:18 at Object.<anonymous> (/var/www/html/rebion/react/node_modules/react-notifications-component/dist/js/react-notifications.dev.js:88:10) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at tryModuleLoad (internal/modules/cjs/loader.js:593:12) at Function.Module._load (internal/modules/cjs/loader.js:585:3) at Module.require (internal/modules/cjs/loader.js:692:17) at require (internal/modules/cjs/helpers.js:25:18)

Just tried to setup the component and it works, however, no CSS is applied.

My setup looks like this:

import ReactNotification from 'react-notifications-component';
import { store } from 'react-notifications-component';
import notificationStyles from 'react-notifications-component/dist/theme.css';

And a simplified component example -

const Header = props => {
  React.useEffect(() => {
    store.addNotification({
      title: "Wonderful!",
      message: "Test message",
      type: "info",
      insert: "bottom",
      container: "bottom-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      dismiss: {
        duration: 5000,
        onScreen: true
      }
    });
  }, []);
return (
    <div>
      <ReactNotification />
    </div>
);

When I console.log the notificationStyles variable I can see the styles -

I am not sure what I might be doing wrong. Any suggestions will be appreciated!!!

Hi
I want to show notification on creating a new ticket, but i am getting an error "Cannot read property 'addNotification' of null". i am sharing a snippet of my code, will you please help me to find where i am going wrong.
render() { if(this.props.newTicket.createdTicket){ this.addNotification() } }
i have tried this on onClick event, it worked fine but here i want to display notification if my state createdTicket is true on page render.

Rather than setting a fixed value for width, it would be nice to have the width the same as the content of the text inside the notification.

I have a situation where I need to list three short things on their own lines. Doesn’t look like there is Markdown support. Is that on the docket?

Great library, but I find the timer (progress bar) distracting to the user so I want to hide it.
I can manually hide the timer by adding my own CSS like so:

.notification-item .timer {
    visibility: hidden;
    margin-top: 0px !important;
}

If I set it to display:none, the notification never dismisses.
Is there a props or something to hide the timer, so that i don't need to override the CSS?

As of version 2.0.6, providing a width prop has no effect.

This is a sweet library! The others I tried were outdated and not working with functional components. Now I have a notification added to my component and it works fine when I don't use the 'content' parameter but instead use the type, title, and message. But when I switch to content, the notification stays on the screen and the moving timer bar never shows up.

Here is my code where I add the notification:

store.addNotification({
	//type: 'success',
	//title: 'Title',
	//message: 'Message',
	insert: 'top',
	container: 'top-right',
	animationIn: ['animated', 'bounceIn'],
	animationOut: ['animated', 'fadeOut'],
	dismiss: {
		duration: 5000,
		onScreen: true
	},
	content: (
		<Notification
			type={'success'}
			title={'Avg bag weight added!'}
			message={
				'Average bag weight of ' + avgWeight + 'lbs added.'
			}
		/>
	)
});

And here is my Notification component:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';
import './customTypes.css';

const Notification = ({ type, title, message }) => {
	return (
		<div className={`notification-custom-${type}`}>
			<div className={'notification-custom-icon'}>
				<FontAwesomeIcon
					className={'check-circle'}
					icon={faCheckCircle}
					size={'4x'}
					style={{ color: '#ffffff' }}
				/>
			</div>
			<div className={'notification-custom-content'}>
				<div className={'notification-title'}>{title}</div>
				<p className={'notification-message'}>{message}</p>
			</div>
		</div>
	);
};

export default Notification;

README update

• It would help the user know first what the app can do

Why SASS files are missing in NPM package?

Please rebuild and publish your module again, the main file dist/react-notifications-component.js is missing in 0.1.0 version.

Hello everyone!

I need to send a notification with a relatively long message or containing a list of items but as the message gets longer, the width of the notification gets bigger, it doesn't create line breaks neither allows me to create a linebreak by myself on the message content.

Is it possible to do this linebreak or put custom HTML in the message? Something like this.

Thanks for the help!

hi
how can i replace new notifcation to previews notification.
currently it prepends new notification to previews.

Hi, I have new issue. I already have solution, but want a more concise one.

How can I fire the event in nested components directly without passing through many component layers?

So because of the position issue, the <ReactNotifications /> is placed at the top level in the component tree, or in <App />. I did the same.

However, I have some children components, or actually grand children components which need to fire the alert event of <ReactNotifications /> in <App />.

The current solution is to pass the event handler to the grand children. If the component tree gets complicated, what else can we do in order to achieve the same result with less code?

Here's the example code from CodeSanbox.io.

class App extends Component {
  displayNotification = () => {
    console.log(this.ref);
    this.ref.addNotification({
      title: "Awesomeness",
      message: "Awesome Notifications!",
      type: "success",
      insert: "top",
      container: "top-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      dismiss: { duration: 2000 },
      dismissable: { click: true }
    });
  };
  render() {
    return (
      <div>
        <h1>App Component</h1>
        <ReactNotifications ref={ref => (this.ref = ref)} />
        <Parent notify={this.displayNotification} />
      </div>
    );
  }
}

const Parent = ({ notify }) => (
  <div>
    <h2>Parent</h2>
    <Child notify={notify} />
  </div>
);

const Child = ({ notify }) => (
  <div>
    <h3>Child</h3>
    <GrandChild notify={notify} />
  </div>
);

const GrandChild = ({ notify }) => (
  <div>
    <h4>GrandChild</h4>
    <button onClick={notify}>Click for notification</button>
  </div>
);

In this example, how can I invoke the alert event from GrandChild without passing the event handler through App > Parent > Child > GrandChild?

Without referring to the ultimate <ReactNotifications /> on top component<ReactNotifications />, all the alerts will overlap on one another if many <ReactNotifications /> is used.

What is the solution? Redux can solve the state issue, but this is event handler?

Thank you
Duy

As far as I can tell, currently if a custom content component is provided, no props are made available to it. This means that as no close icon is shown it requires dismiss.click to be true to allow the user to dismiss the toast - which clashes if the custom toast contains something like a react-router Link or any other click handler.

Ideally content should pass down the id of the toast as a prop to allow the custom component to call the removeNotification(id) method on itself.

eg:

store.addNotification({
  content: ({ id }) => (
    <div>
      Item added to <Link to="/basket">your basket</Link>
      <br />
      <button onClick={() => store.removeNotification(id)}>× Dismiss</button>
    </div>
  )
})

An issue that will be a bug, is noticed. Notification freeze, and doesn't dismiss. Neither does with on click.
Here the config

this.defaultConfig = {
            insert: 'top',
            container: 'top-right',
            animationIn: ["animated", "flipInX"],
            animationOut: ["animated", "flipOutY"],
            dismiss: { duration: 8000 },
            dismissable: { click: true }
        }

Keeping happening. The phenomena is seen when multiple notification happen at same time. One of them freeze.

Reproduce

yarn add react-notifications-component

error /Users/suraneti/Thanks-Dashboard/node_modules/react-notifications-component: Command failed.
Exit code: 1
Command: npx npm-force-resolutions
Arguments: 
Directory: /Users/suraneti/Thanks-Dashboard/node_modules/react-notifications-component
Output:
npx: installed 5 in 1.661s
ENOENT: no such file or directory, open './package-lock.json'
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Edit

1. Install success via yarn with version 2.0.7.

Any ETA for onDismiss event and top-center position. I wanted to use this component in my project but without those, I have to find sth else.

it would be nice if we could set the max count of notifications

onScreen option is ignored if content is set

Currently there are only 2 examples shown on README - custom notification type and custom content to illustrate Font Awesome icon usage.

I think the following should also be added to the list:

• timeout usage
• dismiss by click/touch
• usage of X icon
• custom X icon

Samples already have some similar examples

Hi. The component implementation does not seem to assume server-side rendering.

https://github.com/teodosii/react-notifications-component/blob/master/src/react-notification-component.js#L28

ReferenceError: window is not defined

It would be very useful to have an extra container to show a message at the center of the screen.
It could be implemented very easily by doing the following:

<div class="notification-container-center-center">

.notification-container-center-center {
    transform: translateX(-50%);
    top: 50%;
    left: 50%;
}

Not sure if this is a feature or bug. I just found it and am in a hurry to complete some work, hence not digging deep and just posting here.

Once the notification is open:

store.addNotification({
  title: "Wonderful!",
  message: "teodosii@react-notifications-component",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animated", "fadeIn"],
  animationOut: ["animated", "fadeOut"],
  dismiss: {
    duration: 5000,
    onScreen: true
  }
});

If you keep resizing the window, before the time ends it'll keep on going.

Hello,

I don't know why but the width of my notifications is weird.
Look: https://prnt.sc/pbuaob

Thanks !

Simetimes I have this warning message (screenshot link below)

https://prnt.sc/pew4j6

I really don't understand why. Maybe it is bug from this plugin (react-notifications-component).
My component is:

class Notifications extends PureComponent {
  notesId = [];

  componentDidMount() {
    this.props.initTrainIncidentNotesWsChannel();
  }

  componentWillUnmount() {
    this.props.closeTrainIncidentNotesWsChannel();
    this.clearAllNotes();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.note && nextProps.note.size && nextProps.note !== this.props.note) {
      this.show(nextProps.note);
    }
  }

  clearAllNotes = () => {
    if (this.notesId.length) {
      this.notesId.forEach(id => {
        store.removeNotification(id);
      });
    }
  };

  show = (note = Map()) => {
    const id = store.addNotification({
      title: note.get('message', ''),
      message: note.getIn(['note', 'description'], ''),
      type: 'success',
      insert: 'top',
      container: 'top-right',
      animationIn: ['swing-in-top-fwd'],
      animationOut: ['swing-out-top-bck'],
      dismiss: {
        duration: 5000,
        pauseOnHover: true,
        onScreen: true,
      },
    });
    this.notesId.push(id);
  };

  render() {
    return <ReactNotification />;
  }
}

i am using server side validation in one notification. but when i am add
tag between two validation errors. so
tag display in notify error. what i can do??

my react js code:-
const data = new FormData(event.target);
axios.post('http://localhost/practice/laravel/laravel_api/api/product_add', data)
.then(function (response) {
if (response.data.status == false){
var erorrs = '';
response.data.message.map(function(erorr){
erorrs += erorr+"
";
});
store.addNotification({
title: "Error",
message: erorrs,
type: "danger",
insert: "top",
container: "top-right",
animationIn: ["animated", "fadeIn"],
animationOut: ["animated", "fadeOut"],
width: 350,
dismiss: {
duration: 5000,
onScreen: true,
pauseOnHover: true,
showIcon: true,
}
});
}
});

I want to position the notification containers..is it possible to provide margin / padding etc?

const variables:

const ERROR = 'DANGER';
const NO_NAME = 'You must provide a name for this calculation!'

addNotification(title, message, type) {
        this.notificationDOMRef.current.addNotification({
          title: title,
          message: message,
          type: type.toLowerCase(),
          insert: "top",
          container: "top-right",
          animationIn: ["animated", "fadeIn"],
          animationOut: ["animated", "fadeOut"],
          dismiss: { duration: 2500 },
          dismissable: { click: true }
        });
      }

this.addNotification(ERROR, NO_NAME, ERROR)

Why does obj.type become undefined (ignored) when obj.content is true? I understand the ability of totally customizing the notification.

I'm trying to have valid html in the notification-message. The obj.message will not allow anything but string, and I'd rather not use dangerouslySetInnerHTML. So, I'm passing obj.content with a valid jsx object content: (<p className="notification-message">Hello<br />World</p>)

Everything works fine, except that obj.type is set to undefined. I'd like to use the included CSS for types (success, danger, default, info, warning), but the codebase seems to remove even any custom classNames that use one of those type. Just wondering why the decision was made to ignore obj.type?

Thanks

There should be an option for not dismissing the notification on hover, even if the dismiss duration ends.

I tried to read the example that you have written in the README
The class "notification-item-root" show me like that

<div class="notification-item-root" style="height: 63px; transition: height 600ms cubic-bezier(0.215, 0.61, 0.355, 1) 0ms;"></div>

but mine such as

<div class="notification-item-root" style="height: 63px; transition: height 600ms linear 0ms;"></div>

can you add the feature to customize the css style in the README?

Hi @teodosii!

This isn't really an issue. I just wanted to let u know that I did a blog post on this library: https://alligator.io/react/react-notifications-component/

Thx for the great work on this!

Hi:
I am investigating this library for my use-case.
I have a React component that represents the UI for the notification along with the animations while mounting and unmounting. Is there a way I can render my component as a notification using the existing API?

When more than 20 notifications arrive without dismissing any of them, the last one remains, unable to dismiss.

To test it:

`const notificationInterval = setInterval(
() =>
storeNotification.addNotification({
title: 'Wonderful!',
message: 'teodosii@react-notifications-component',
type: 'success',
insert: 'top',
container: 'top-right',
animationIn: ['animated', 'fadeIn'],
animationOut: ['animated', 'fadeOut'],
dismiss: {
duration: 0,
onScreen: false
}
}),
1000
);

setTimeout(() => {
clearInterval(notificationInterval);
}, 22000)`

Thanks for the job, the component is awesome