Modals and notifications

In order to have same looking modals and notifications in each component, we decided to use sweetalert2 with semantic-ui.

This page describes how to create modals and notifications.

Preconditions

• Know how to style buttons with semantic-ui
• Use the sweetalert2 documentation as a basis

Remarks

• If you need a more complex modal then just use semantic-ui modal

How to

1. Just use JavaScript - no HTML in the render function needed
2. Make sure you set buttonsStyling to false buttonsStyling: false
3. Set the semantic-ui button classes you will need in confirmButtonClass and cancelButtonClass
4. Use functions of the component as callbacks (or then functions)

Examples

Error

swal({ title: 'Error', text: "Nooooooo", type: 'error', confirmButtonText: 'Yes, delete it!', confirmButtonClass: 'ui button', buttonsStyling: false })