# @sweetalert/with-react

> Official SweetAlert plugin for React

Latest version **0.1.1** (published 2018-10-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sweetalert/with-react
pnpm add @sweetalert/with-react
yarn add @sweetalert/with-react
bun add @sweetalert/with-react
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-10-28 |
| First published | 2018-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tristan Edwards |
| Maintainers | t4t5 |

## Links

- npm: https://www.npmjs.com/package/@sweetalert/with-react
- npm.io page: https://npm.io/package/@sweetalert/with-react

## Dependencies (1)

- [@sweetalert/transformer](https://npm.io/package/@sweetalert/transformer.md) ^0.1.1

## Recent versions

- 0.1.1 (latest) — 2018-10-28
- 0.1.0 — 2018-10-28

## README

# SweetAlert for React

Easily render React components within your [SweetAlert](https://github.com/t4t5/sweetalert) modals.

## Why?

Many other framework-specific versions of SweetAlert shy away from its JavaScript-based API and abstract it into a template-based system. 
This one instead embraces it (because JavaScript is awesome!) and lets you pass in components as options!

This lets you continue to use features like Promises, but makes building advanced modal UIs much simpler.

## Install

```bash
npm install @sweetalert/with-react
```

## Usage

When passing JSX as the only parameter, it will replace SweetAlert's `content` option.

```javascript
import React from 'react';
import swal from '@sweetalert/with-react';

class App extends React.Component {
  componentDidMount() {
    swal(
      <div>
        <h1>Hello!</h1>        
        <p>I am a React component inside a SweetAlert modal.</p>
      </div>
    )
  }
}
```

<p align="center">
  <img src="https://user-images.githubusercontent.com/2598660/31619494-f68a91f8-b294-11e7-9561-b4f6b1abd724.png" width="600" />
</p>

You can also explicitly set the `content` option, if you want to set other [options](https://sweetalert.js.org/docs/#configuration) as well:

```javascript
swal({
  content: <div>Hello world!</div>,
  buttons: true,
});
```

Or use a combination of both:

```javascript
swal(<div>Hello world</div>, {
  buttons: true, 
});
```

---
_Source: https://npm.io/package/@sweetalert/with-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._