simple-react-toast/toast.js

Simple react toaster to notify or alert something in bottom of your page.

import React, { Component } from 'react';

class Toaster extends Component {
    constructor(props) {
        super(props);
        this.state = {
            message: '',
        };
        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
        this.handleChange(this.props.message);
    }

    componentDidUpdate(prevProps) {
        if (this.props.message !== prevProps.message) {
            this.handleChange(this.props.message);
        }
    }

    handleChange(message) {
        this.setState({
            message: message || '',
        });
        if (message) {
            setTimeout(() => {
                this.handleChange('');
            }, 10000);
        }
    }

    render() {
        const { message } = this.state;
        const containerStyles = {
            position: 'fixed',
            zIndex: 5,
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            color: '#ffffff',
            fontSize: '14px',
            padding: '10px 20px',
            width: '100%',
            bottom: 0,
            left: 0,
        };
        return (
            <div style={containerStyles} hidden={!message}>
                {message}
            </div>
        );
    }
}

export default Toaster;