react-message-block

An easy to use, simple multi-purpose react messages. Ability to show success, error, warn and info messages by default. Custom Message Styling supported

Usage no npm install needed!

<script type="module">
  import reactMessageBlock from 'https://cdn.skypack.dev/react-message-block';
</script>

README

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.

Prop Optional Default Possible Values Description
text Yes Any String Display Message
type Yes info plain | info | success | error | warn To show Loading Message
onClose Yes Callback func Callback function to close the message block. Close Icon will appear along with the message block
style Yes Custom Style Object To apply user defined styles
align Yes center center | left | right To align message text

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

  • Icon for Messages
  • Auto Hiding Message after N seconds

Author

Nijin Vinodan