Alert

Alert component for react which support customize

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 { AlertProvider } from '@spl-soft-react/alert';

<Animate name='bounceIn'>
    <YourAlertComponent/>
</Animate>

Other package

spl-soft-react