@dhouse.in/message-notification-mui

message-notification-mui

Message notification component using Material-UI

Install

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

Usage

It is divided in two steps:

Step 1: Wrap the application with the provider

import React from 'react'
import { MessageNotification, MessageProvider } from '@dhouse.in/message-notification-mui'
import MyApplication from '.'

const App = () => {
  return (
    <MessageProvider>
      <div>
        <MyApplication />
      </div>
      <MessageNotification />
    </MessageProvider>
  );
}

export default App

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

import React from 'react'
import { useMessageNotification } from '@dhouse.in/message-notification-mui'

const MyApplication = () => {
  const { addMessage } = useMessageNotification();

  const showInfoMessage = () => {
    const title = 'Info Message';
    const text = 'My info message';
    const durationInMilliseconds = 3000;
    addMessage(title, text, 'info', durationInMilliseconds);
  };

  return (
    <div>
      <button onClick={showInfoMessage}>Show Info Message</button>
    </div>
  );
}

export default MyApplication

License

MIT © Marcel Silva