# @desouza-engineering/better-popups

> A better and react based way to show alerts and promps on your web app.

Latest version **1.0.7** (published 2019-10-06) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @desouza-engineering/better-popups
pnpm add @desouza-engineering/better-popups
yarn add @desouza-engineering/better-popups
bun add @desouza-engineering/better-popups
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2019-10-06 |
| First published | 2019-10-01 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lucas Desouza |
| Maintainers | lucasdesouza |
| Keywords | better-popup, popup, alert, prompt, alerts, prompts |

## Links

- npm: https://www.npmjs.com/package/@desouza-engineering/better-popups
- npm.io page: https://npm.io/package/@desouza-engineering/better-popups

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.7 (latest) — 2019-10-06
- 1.0.6 — 2019-10-06
- 1.0.5 — 2019-10-06
- 1.0.4 — 2019-10-03
- 1.0.3 — 2019-10-03
- 1.0.2 — 2019-10-02
- 1.0.1 — 2019-10-02
- 1.0.0 — 2019-10-01

## README

# Better Popups

[![Actions Status](https://github.com/LucasCarioca/better-popups/workflows/CI/badge.svg)](https://github.com/LucasCarioca/better-popups/actions)


[![Actions Status](https://github.com/LucasCarioca/better-popups/workflows/Publish/badge.svg)](https://github.com/LucasCarioca/better-popups/actions)

## Getting started

### Install 

```shell script
npm install @desouza-engineering/better-popups
```

### Use

Demo code

```jsx harmony
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;
```

---
_Source: https://npm.io/package/@desouza-engineering/better-popups · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._