Doing a React POC or building a production application? react-message-block is an easy to use package for showing success/error/warn/info/custom message blocks.

Features

• Lightweight
• Out of the box message stylings
• Custom Styling Options

Installation

With Yarn

yarn add react-message-block

With npm

npm i --save react-message-block

Documentation

You could view the documentation in Github Page as well.

Usage

react-message-block is compatible with both Class and Functional React Components.

Basic Usage

import Message from 'react-message-block';
const App = () => {
    return (
        <div>
            <Message text = {'Congrats! You have installed this plugin'} />
        </div>
    )
}

View Example on Sandbox

Available Custom Props

By default, react-message-block comes up with the following properties. You could use the following to customize your message block out of the box.

Example

Custom HTML Layout

Not happy with the one line message? You could always pass children within the Message component to display your custom message layout.

<Message type = 'info'>
    <h4>Message Heading</h4>
    <p>This is the message body</h4>
</Message>

<Message type = 'error'>
    <h4>Please check the following fields</h4>
    <ul>
      <li>Email is not valid</li>
      <li>Password and Confirm Password does not match</li>
      <li>Phone Number is already registered</li>
    </ul>
</Message>

View Example on Sandbox

onClose

Many times, you would want to provide the feasibility of dismissing a message block. You could achieve it by passing onClose callback function as prop to the component.

<Message 
  text = 'Something went wrong' 
  type = 'error' 
  onClose = {handleClose} 
>

View Example on Sandbox

No Background! Just the message

Want to show just the message without a background? Use type="plain In most projects, you would want to use this while showing "No Content Messages"

<Message 
  text = 'No Content Available' 
  type = 'plain' 
  onClose = {handleClose} 
>

What's Coming Up

Author

Nijin Vinodan