message-notification-mui

Message notification component using Material-UI

Install

1npm install --save @dhouse.in/message-notification-mui

Usage

It is divided in two steps:

Step 1: Wrap the application with the provider

1import React from 'react'
2import { MessageNotification, MessageProvider } from '@dhouse.in/message-notification-mui'
3import MyApplication from '.'
4
5const App = () => {
6  return (
7    <MessageProvider>
8      <div>
9        <MyApplication />
10      </div>
11      <MessageNotification />
12    </MessageProvider>
13  );
14}
15
16export default App

Step 2: Use the hook useMessageNotification to set and show the message

1import React from 'react'
2import { useMessageNotification } from '@dhouse.in/message-notification-mui'
3
4const MyApplication = () => {
5  const { addMessage } = useMessageNotification();
6
7  const showInfoMessage = () => {
8    const title = 'Info Message';
9    const text = 'My info message';
10    const durationInMilliseconds = 3000;
11    addMessage(title, text, 'info', durationInMilliseconds);
12  };
13
14  return (
15    <div>
16      <button onClick={showInfoMessage}>Show Info Message</button>
17    </div>
18  );
19}
20
21export default MyApplication

License

MIT © Marcel Silva