React Custom Alert Component

Tue, Jan 1, 2019 2-minute read

Alert component for react which support customize(@spl-soft-react/alert) Other packages(spl-soft-react)

Installation

npm install @spl-soft-react/alert --save

Usage

Wrap your app with AlertProvider

import { AlertProvider } from '@spl-soft-react/alert';
 
<AlertProvider >
    <App />
</AlertProvider>

and then use withAlert hoc component to call alert

import { withAlert } from '@spl-soft-react/alert';
 
class Example extends React.Component {
  render() {
    const { alert } = this.props;
    return (
      <div >
        <Button onClick={()=> alert('title', 'ASDF JKL:')} >
          Ok
        </Button>
      </div>
    );
  }
}


export default withAlert(Example);

Custom component

Can use own custom alert component if u need. u can’t use animate prop with custom component.

import Alert from './customAlert';
import { AlertProvider } from '@spl-soft-react/alert';
 
<AlertProvider component={Alert}>
    <App />
</AlertProvider>

custom alert example

import React from 'react';
import Animate from './Animate';
// css
import '../css/alert.css';
 
class DefaultAlert extends React.Component {
    handleClickOpen = () => {
        this.setState({ open: true });
    };
 
    handleClose = () => {
        const { onClose } = this.props
        onClose()
    };
 
    render() {
        const { alert, animate } = this.props
 
        if (!alert.open) return null;
        return (
            <div className="overlay">
                <Animate name={animate}>
                    <div className="popup">
                        <h3>{alert.title}</h3>
                        <span className="close" onClick={this.handleClose}>&times;</span>
                        <div className="content">
                            {alert.message}
                        </div>
                    </div>
                </Animate>
            </div>
        );
    }
}
 
export default DefaultAlert;

mui custom alert example

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
 
class AlertDialog extends React.Component {
  handleClickOpen = () => {
    this.setState({ open: true });
  };
 
  handleClose = () => {
    const { onClose } = this.props
    onClose()
  };
 
  render() {
    const { alert } = this.props
    
    return (
      <div>
        <Dialog
          open={alert.open}
          onClose={this.handleClose}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">{alert.title}</DialogTitle>
          <DialogContent style={{minWidth: 200}}>
            <DialogContentText id="alert-dialog-description">
              {alert.message}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary" autoFocus>
              Ok
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}
 
export default AlertDialog;

Animation

Use Animation.css for animation .

import { AlertProvider } from '@spl-soft-react/alert';
 
<AlertProvider animate='bounceIn'>
    <App />
</AlertProvider>

u can also use Animate component

import { Animate } from '@spl-soft-react/alert';
 
<Animate name='bounceIn'>
    <YourAlertComponent/>
</Animate>