@desouza-engineering/better-popups

Better Popups

Getting started

Install

npm install @desouza-engineering/better-popups

Use

Demo code

import React, { Component } from 'react';
import { Alert, Confirm } from 'better-popups';

class App extends Component {

	state = {
		popup: false,
		popupConfirm: false,
		popupThemed: false,
		popupConfirmThemed: false,
		confirmed: false
	}

	render() {
		console.log(Alert)
		console.log(Confirm)
		return (
			<div>
				<button onClick={this.togglePopup}>Alert</button>
				<button onClick={this.togglePopupConfirm}>Confirm Alert</button>
				<button onClick={this.togglePopupThemed}>Alert Themed</button>
				<button onClick={this.togglePopupConfirmThemed}>Confirm Alert Themed</button>

				{this.state.popup ?
					<Alert title="My first Alert!"
						close={this.togglePopup}>
						Here is the message that I would like to display
						</Alert> : null}

				{this.state.confirmed ?
					<Alert title="You have confirmed!"
						close={this.toggleConfirmed}>
						Thank you!
						</Alert> : null}

				{this.state.popupConfirm ?
					<Confirm title="My first Confirm Alert!"
						close={this.togglePopupConfirm}
						confirm={this.toggleConfirmed}>
						Here is the message that I would like to display
						</Confirm> : null}

				{this.state.popupThemed ?
					<Alert title="My first Themed Alert!"
						close={this.togglePopupThemed}
						alertPrimaryColor={'#24252a'}
						alertPrimaryFontColor={'white'}
						alertSecondaryColor={'#2c3e50'}
						alertSecondaryFontColor={'white'}>
						Here is the message that I would like to display
						</Alert> : null}
				
				{this.state.popupConfirmThemed ?
					<Confirm title="My first Themed Confirm Alert!"
						close={this.togglePopupConfirmThemed}
						confirm={this.toggleConfirmed}
						alertPrimaryColor={'#24252a'}
						alertPrimaryFontColor={'white'}
						alertSecondaryColor={'#2c3e50'}
						alertSecondaryFontColor={'white'}>
						Here is the message that I would like to display
						</Confirm> : null}
			</div>
		);
	}

	togglePopup = () => {
		this.setState({
			popup: !this.state.popup
		});
	}

	togglePopupConfirm = () => {
		this.setState({
			popupConfirm: !this.state.popupConfirm
		});
	}

	togglePopupThemed = () => {
		this.setState({
			popupThemed: !this.state.popupThemed
		});
	}
	
	togglePopupConfirmThemed = () => {
		this.setState({
			popupConfirmThemed: !this.state.popupConfirmThemed
		});
	}

	toggleConfirmed = () => {
		this.setState({
			confirmed: !this.state.confirmed
		})
	}
}

export default App;