Please give actual examples of usage in your .md file

[alilland]

I love what I see is possible to do, but newer developers are going to have a difficult time reading your documentation and understanding at a glance how to implement your product.

if you could give smaller code examples in the MD file and samples on how to include it in an application, your product would likely grow in popularity

[puranjayjain]

@aronlmin great idea I see a lot of people getting stuck in implementation, an app demo and code should solve the problem indeed. I'll see if I can cook an example. PRs are also welcome

[alilland]

also, calling proptypes directly to React is depricated now, https://facebook.github.io/react/warnings/dont-call-proptypes.html

[puranjayjain]

Oh need to upgrade them or remove prop type validations wherever not necessary. Thanks again

[Paul-Vandell]

Yeah, im new, thx for this package but didn't succed to used it. Tell me what wrong here ?

import ReactMaterialUiNotifications from 'react-materialui-notifications';

export default class Main extends Component {

  notification() {
    ReactMaterialUiNotifications.showNotification({
      title: 'Title',
      additionalText: `Some message to be displayed`,
    });
  }

  render() {
    return (
      <div className='p-t4'>
        <div className="btn" onTouchTap={()=>this.notification()}>open</div>
        <ReactMaterialUiNotifications
          desktop={true}
          transitionName={{
            leave: 'dummy',
            leaveActive: 'fadeOut',
            appear: 'dummy',
            appearActive: 'zoomInUp',
          }}
          transitionAppear={true}
          transitionLeave={true}
        />
      </div>
    );
  }
}

Im sure that's easy but i dont understand the base to make it work properly... Thx in advance

[Paul-Vandell]

Ok the issue is coming from that i didn't refresh the state in my own component with a incremental Notifications count in the constructor, but the question is why this package do not refresh his state itself ? not mine.

[Paul-Vandell]

Oh i see, https://github.com/puranjayjain/react-materialui-notifications/blob/69726ce67c3df902c76dde27c254280032a0a7b6/src/app/ReactMaterialUiNotifications.js#L19 I think that the notification array should be in constructor ?

export default class ReactMaterialUiNotifications extends Component {
  constructor(props) {
    super(props);
    this.state = {
    notifications : [],
    count : 0,
    };
  }

Then your state will be refresh after a new notification ? i 'll tried this and back then.

[Paul-Vandell]

Ok i got a working solution. I 've remove your static function and replace by simple function. The great things that with the static function you can access it anywhere but your component did not trigger when a new notification comin unless your refresh your own component So the best way was to reference your notification component to access the showNotification function(); If some of them don't want to always render for a new <ReactMaterialUiNotifications/>, they can use an event listener in the notification component (only if static keyword remove ).

    componentDidMount(){
        window.addEventListener('addNotification', (e) => {
            const notification = e.detail;
            this.showNotification(notification)
        })
    }

and call it with :

  const call = new CustomEvent('addNotification', {detail: notification});
  window.dispatchEvent(call);

and place<ReactMaterialUiNotifications/> in a higher order

Redux do it well to. if anyone want the source code to test it with reference, ask me. Hope it help !

[djorg83]

@Vandell63 i was able to use a HOC and keep the static function and get it to work by using this.forceUpdate();

import React from 'react';
import ReactMaterialUiNotifications from 'react-materialui-notifications';

class NotificationHOC extends React.Component {
    componentDidMount(){
        window.addEventListener('addNotification', (e) => {
            const notification = e.detail;
            ReactMaterialUiNotifications.showNotification(notification);
            this.forceUpdate();
    });
    }

    render() {
        return <ReactMaterialUiNotifications {...this.props} />;
    }
};

const NotificationShell = () => (
    <NotificationHOC
        desktop={true}
        transitionName={{
            leave: 'dummy',
            leaveActive: 'fadeOut',
            appear: 'dummy',
            appearActive: 'zoomInUp',
        }}
        transitionAppear={true}
        transitionLeave={true}
    />
);

export default NotificationShell;

then in the root of my app...

<MuiThemeProvider>
        <Router>
            <div>
                <AppBar />
                <div>
                    <SideBar />
                    <MainContent />
                </div>
                <NotificationShell />
          </div>
    </Router>
</MuiThemeProvider>

[djorg83]

Turns out that the above code only worked to get the notifications to render when they are added. But when you click the X button to remove one, it breaks the app because of something related to the animation on the button. This was enough for me to switch to react-toastify.