Sweet alert 2 not showing up as a modal when alert thrown

user_8551819 0
Viewed 4739

I assume that I must be importing this wrong some how, but I am not sure. I followed the directions on the github. It says that I can npm install it and then just import swal from 'sweetalert2'. Do I also have to use the js and css files?

What happens is that I git a weird alert in the bottom left of my window that won't go away. enter image description here

Here is my code:

import React, { Component } from 'react';
import swal from 'sweetalert2';

class TestSwal extends Component {
  componentDidMount() {
    swal({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary file!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, keep it'
    }).then(
      function() {
        swal('Deleted!', 'Your imaginary file has been deleted.', 'success');
      },
      function(dismiss) {
        // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
        if (dismiss === 'cancel') {
          swal('Cancelled', 'Your imaginary file is safe :)', 'error');
        }
      }
    );
  }
  render() {
    return <div>Test Swal</div>;
  }
}

export default TestSwal;
sweetalert2 sweetalert reactjs node.js javascript
2 Answers

You should include CSS file:

import 'sweetalert2/dist/sweetalert2.min.css';

or include CDN version into the HTML file, as shown in Usage section on Github.

user_66686730

Update (Jan 2017): Starting from v7 all you need to import both JS and CSS is:

import swal from 'sweetalert2'

We recently released v6.10.0 which contains all-in-one version with JS and CSS in one place.

You can import it this way:

import swal from 'sweetalert2/dist/sweetalert2.all.min.js'
user_13314250
Related