Message

Display global messages as feedback in response to user operations. Message component is mostly used

• To provide feedback such as success, warning, error, etc.
• A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weight prompt.
• Mostly useful to notify user for success or error API response

Usage

Wrap your <App /> within <MessageProvider /> component, like

import { MessageProvider } from '@tail-kit/tail-kit'

export default function App() {
  return (
    <MessageProvider>
      <App />
    </MessageProvider>
  )
}

Import useMessage and use it to display a message. useMessage provides you 2 methods which you can access using const {message, removeMessage} = useMessage()

import { useMessage } from '@tail-kit/tail-kit'

export default function SomeComponent() {
  const { message, removeMessage } = useMessage()

  React.useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/some-endpoint')
        // do something with response
        message.success('Successfully fetched data')
      } catch (error) {
        message.error(`Error occured while fetching data: ${error}`)
      }
    }
    fetchData()
  }, [])

  return (
    // return something awesome ...
    null
  )
}

There are 5 different types of messages available to user. You can pass the string which you want to render in Message component as argument.

• message.info()
• message.success()
• message.warning()
• message.error()
• message.loading()

Use removeMessage method to programmatically remove a message. removeMessage() takes the id of Message component you want to remove. All message methods return the id of the message which you can use with removeMessage method.

Basic Message

Types of Messages

Custom Dismiss Time

Display Loading Indicator

Message With Custom icon

Remove Message programmatically

Message will not be removed automatically if provided dismissTime is 0. You can remove a message by calling removeMessage(id)

MessageProvider Props