react-message-preview v0.1.15

react-message-preview

A React Component - Browser centered Message box with blur background.

On Large Screen

On Small Screen

Examples

1. Here is the first one to get you started:

import React, { Component } from 'react';
import MessagePreviewer from 'react-message-preview';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      showMessagePreview: true,
      count: 1
    }
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.removePreviewFunction = this.removePreviewFunction.bind(this);
  }

  removePreviewFunction(){
    this.setState({
      showMessagePreview: false
    })
  }
  increment(){
    this.setState({
      count: this.state.count + 1
    })
  }
  decrement(){
    if(this.state.count != 0){
      this.setState({
        count: this.state.count - 1
      })
    }
  }

  render() {
    let self = this;
    return (
      <div className="App">
        {
          self.state.showMessagePreview &&
            <MessagePreviewer
              messageTitle={"Counter"}
              messageText={"Counter : " + self.state.count}
              resetText="Decrement"
              saveText="Increment"
              closePreview={this.removePreviewFunction}
              saveFunction={self.increment}
              resetFunction={self.decrement}
            />
        }
      </div>
    );
  }
}

export default App;

2. Second one for Advanced params(Only render function re-write)

Here we are overriding

• CSS of class "preview-div" styles
• Reset/Cancel button hidden

You can override the props depending on table names given below for reference.

render() {
    let self = this;
    let messageDetails = [];
    if(self.state.count <= 0){
      messageDetails.push(<div>Counter stopped at zero.</div>);
    }
    messageDetails.push(<div>{"Counter : " + self.state.count}</div>);
    return (
      <div className="App">
        {
          this.state.showMessagePreview &&
            <MessagePreviewer
              messageStyle={{top: "15%", color: "green"}}
              messageTitle={"Counter"}
              messageText={messageDetails}
              resetText="Decrement"
              saveText="Increment"
              resetFlagHide={true}
              closePreview={this.removePreviewFunction}
              saveFunction={self.increment}
              resetFunction={self.decrement}
            />
        }
      </div>
    );
  }

Paramters as Props

All Props are optional except closePreview function(unless u want my preview to be always on ur screen) :smirk:

As you can see, we can send messageText as Array also. See this to view more on this

Help

Published Guide :heart_eyes: