Example for props

[joelclaudio]

Example for props

[gor181]

Hey @joelclaudio ,

You can use it as in example => https://github.com/gor181/react-notification-system-redux/blob/master/example/src/components/container.js#L7-L17

this.context.store.dispatch(Notifications.succss({
  // uid: 'once-please', // you can specify your own uid if required
  title: 'Hey, it\'s good to see you!',
  message: 'Now you can see how easy it is to use notifications in React!',
  position: 'tr',
  autoDismiss: 0,
  action: {
    label: 'Click me!!',
    callback: () => alert('clicked!')
  },
  style: false,
  noAnimation: true
}));

Same example is already in the readme: https://github.com/gor181/react-notification-system-redux#usage

All information you need should be initiated via actions and shouldn't be passed as props to the <Notifications /> component. Please check how to setup in the readme.

Let me know if you have any questions. 🍺

[joelclaudio]

Thanks for your reply.

For some reason I can't seem to make this work on my side. For sanity's sake I decided to clone your repository and tried to change your example-code at

react-notification-system-redux/example/src/components/container.js

in 3 variants:

const notificationOpts = {
  // uid: 'once-please', // you can specify your own uid if required
  title: 'Hey, it\'s good to see you!',
  message: 'Now you can see how easy it is to use notifications in React!',
  position: 'tc',
  autoDismiss: 5,
  action: {
    label: 'Click me!!',
    callback: () => alert('clicked!')
  },
  style: false,
  noAnimation: true
};

const notificationOpts = {
  // uid: 'once-please', // you can specify your own uid if required
  title: 'Hey, it\'s good to see you!',
  message: 'Now you can see how easy it is to use notifications in React!',
  position: 'tc',
  autoDismiss: 5,
  action: {
    label: 'Click me!!',
    callback: () => alert('clicked!')
  },
  style: {color: '#ff0000'},
};

const notificationOpts = {
  // uid: 'once-please', // you can specify your own uid if required
  title: 'Hey, it\'s good to see you!',
  message: 'Now you can see how easy it is to use notifications in React!',
  position: 'tc',
  autoDismiss: 5,
  action: {
    label: 'Click me!!',
    callback: () => alert('clicked!')
  },
  style: {
  NotificationItem: { // Override the notification item
    DefaultStyle: { // Applied to every notification, regardless of the notification level
      margin: '10px 5px 2px 1px'
    },
    success: { // Applied only to the success notification item
      color: 'red'
    }
  }
}
};

Although the changes that I made to the autoDismiss and position fields worked, the ones made to style and noAnimation. It's possible that I am missing something here. Can you please help?
Thanks 👍

[gor181]

Hey @joelclaudio ,

Trying it out now.

Cheers,

[gor181]

Hey @joelclaudio ,

You were right! 🍺 There was a bug with it. I have just released a new version addressing that, a simple npm uninstall and then npm i should do it.

So how you do it is:

const style = {
  NotificationItem: { // Override the notification item
    DefaultStyle: { // Applied to every notification, regardless of the notification level
      margin: '10px 5px 2px 1px'
    },

    success: { // Applied only to the success notification item
      color: 'red'
    }
  }
}

<Notifications notifications={notifications} style={style} noAnimation />

It supports any properties which NotifySystem does.

Please let me know if it works for you.

Cheers,

[joelclaudio]

Thanks @gor181,

It's working, I can now customise the notifications styling. :)

One more thing: I used the noAnimation flag and didn't see any change in the notifications behaviour. I don't know if there is a problem with your wrapper, the react-notification-system or even my interpretation on what this flag does ( https://github.com/igorprado/react-notification-system#important-1 ).
The thing is I don't need the noAnimation flag so for me your system works spectacularly.

Thank you very much for your time put into this, it helped us a lot in our implementation. :)

[gor181]

Hey @joelclaudio ,

Thanks for reporting back.
Yes I also had issues with testing the noAnimation property, but from what I see it's being sent to the react-notification-system component, so It's definitely something which sould be addressed to the original project if needed.

Anyways, thanks for reporting and helping in testing it out.

Cheerio!