react-message-block v1.0.2
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