React Sweet Alert

React Sweet Alert is a library that allows you to easily create beautiful, customizable alerts and modals in your React application. It is based on the popular SweetAlert2 library, with the added benefit of being fully compatible with React.

Features

• Easy to use: simply import the React component and pass in your options as props
• Customizable: choose from a variety of pre-built themes, or create your own using Sass variables
• Responsive: scales beautifully across all screen sizes
• Adaptable: use as a simple alert, confirmation dialog, or complex modal
• Accessible: keyboard and screen reader friendly

Installation

To install React Sweet Alert, simply use your favorite package manager:

npm install reactjs-sweetalert

or

yarn add reactjs-sweetalert

Usage

To use React Sweet Alert, first import it into your component:

import SweetAlert from 'reactjs-sweetalert';

Then, create a new alert by passing in your options as props:

<SweetAlert title="Success!" success={true}>
  Your order has been placed.
</SweetAlert>

You can also customize the alert by passing in additional props, such as:

<SweetAlert
  title="Are you sure?"
  type="warning"
  showCancelButton={true}
  confirmButtonText="Yes, delete it!"
  cancelButtonText="Cancel"
  onConfirm={() => handleDelete(id)}
>
  This action cannot be undone.
</SweetAlert>

For more information on available options and customization, check out the official documentation.

Examples

Here are a few examples of what you can do with React Sweet Alert:

Simple alert

Show a simple alert with a success message:

<SweetAlert title="Success!" success={true}>
  Your order has been placed.
</SweetAlert>

Confirmation dialog

Ask the user to confirm an action before proceeding:

<SweetAlert
  title="Are you sure?"
  type="warning"
  showCancelButton={true}
  confirmButtonText="Yes, delete it!"
  cancelButtonText="Cancel"
  onConfirm={() => handleDelete(id)}
>
  This action cannot be undone.
</SweetAlert>

Custom theme

Create your own theme using Sass variables:

$swal-color-primary: #2d6ee8;
$swal-color-background: #f7fafc;

@import 'reactjs-sweetalert/dist/sweetalert.css';

<SweetAlert title="Custom theme" type="success" customClass="my-theme">
  This alert is using a custom theme.
</SweetAlert>

Full modal

Create a complex modal with multiple steps:

<SweetAlert
  title="Create a new account"
  onConfirm={() => setStep(2)}
>
  <div className={step === 1 ? '' : 'hidden'}>
    <label>
      Name:
      <input type="text" />
    </label>
    <label>
      Email:
      <input type="email" />
    </label>
    <label>
      Password:
      <input type="password" />
    </label>
  </div>
  <div className={step === 2 ? '' : 'hidden'}>
    <p>
      Congratulations! Your account has been created.
    </p>
  </div>
</SweetAlert>

Conclusion

React Sweet Alert is a powerful and versatile library that can help you create beautiful alerts and modals in your React application with ease. By following the examples and documentation, you can quickly get up and running and start improving the user experience of your application.