npm package: @spl-soft-react/alert
Description: react alert
Author: San Pyae Lin
Latest version: 0.0.104

# Alert

Alert component for react which support customize 

## Installation 

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

## Usage
Wrap your app with AlertProvider 
```js
import { AlertProvider } from '@spl-soft-react/alert';

<AlertProvider >
    <App />
</AlertProvider>

```

and then use withAlert hoc component to call alert
```js
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.
```js
import Alert from './customAlert';
import { AlertProvider } from '@spl-soft-react/alert';

<AlertProvider component={Alert}>
    <App />
</AlertProvider>

```

custom alert example
```js
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

```js
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](https://daneden.github.io/animate.css/) for animation .

```js
import { AlertProvider } from '@spl-soft-react/alert';

<AlertProvider animate='bounceIn'>
    <App />
</AlertProvider>

```
u can also use Animate component
```js
import { AlertProvider } from '@spl-soft-react/alert';

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

## Other package

[spl-soft-react](https://www.npmjs.com/org/spl-soft-react)