• Stars
    star
    241
  • Rank 167,643 (Top 4 %)
  • Language
    R
  • License
    Other
  • Created about 8 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ—ฏ๏ธ Easily create pretty popup messages (modals) in Shiny

shinyalert

๐Ÿ—ฏ๏ธ Easily create pretty popup messages (modals) in Shiny

Demo ยท by Dean Attali

R build status CRAN version


{shinyalert} lets you easily create pretty popup messages (modals) in Shiny.

Modals can contain text, images, OK/Cancel buttons, Shiny inputs, and Shiny outputs (such as plots and tables). A modal can also have a timer to close automatically, and you can specify custom code to run when a modal closes. See the demo Shiny app online for examples.

Need Shiny help? I'm available for consulting.
If you find {shinyalert} useful, please consider supporting my work! โค

This package is part of a larger ecosystem of packages with a shared vision: solving common Shiny issues and improving Shiny apps with minimal effort, minimal code changes, and clear documentation. Other packages for your Shiny apps:

Package Description Demo
shinyjs ๐Ÿ’ก Easily improve the user experience of your Shiny apps in seconds ๐Ÿ”—
shinyscreenshot ๐Ÿ“ท Capture screenshots of entire pages or parts of pages in Shiny apps ๐Ÿ”—
timevis ๐Ÿ“… Create interactive timeline visualizations in R ๐Ÿ”—
shinycssloaders โŒ› Add loading animations to a Shiny output while it's recalculating ๐Ÿ”—
colourpicker ๐ŸŽจ A colour picker tool for Shiny and for selecting colours in plots ๐Ÿ”—
shinybrowser ๐ŸŒ Find out information about a user's web browser in Shiny apps ๐Ÿ”—
shinydisconnect ๐Ÿ”Œ Show a nice message when a Shiny app disconnects or errors ๐Ÿ”—
shinytip ๐Ÿ’ฌ Simple flexible tooltips for Shiny apps WIP
shinymixpanel ๐Ÿ” Track user interactions with Mixpanel in Shiny apps or R scripts WIP
shinyforms ๐Ÿ“ Easily create questionnaire-type forms with Shiny WIP

Table of contents

Examples

Example 1: Simple modal

basic modal

Example 2: Simple input modals

input modal

Example 3: Shiny inputs/outputs in modals

Shiny inputs

Example 4: Chaining modals

chaining modals

Sponsors ๐Ÿ†

There are no sponsors yet

Become the first sponsor for {shinyalert}!

Overview

{shinyalert} uses the sweetalert JavaScript library to create simple and elegant popups (modals) in Shiny.

Simply call shinyalert() with the desired arguments, such as a title and text, and a modal will show up. Here is a minimal Shiny app code that creates a modal:

library(shiny)
library(shinyalert)

ui <- fluidPage(
  actionButton("preview", "Preview")
)

server <- function(input, output, session) {
  observeEvent(input$preview, {
    # Show a modal when the button is pressed
    shinyalert("Oops!", "Something went wrong.", type = "error")
  })
}

shinyApp(ui, server)

Installation

For most users: To install the stable CRAN version:

install.packages("shinyalert")

For advanced users: To install the latest development version from GitHub:

install.packages("remotes")
remotes::install_github("daattali/shinyalert")

Simple input modals

Usually the purpose of a modal is simply informative, to show some information to the user. However, the modal can also be used to retrieve an input from the user by setting the type = "input" parameter.

When using a type="input" modal, only a single input can be used. By default, the input will be a text input, but you can use other input types by specifying the inputType parameter (for example inputType = "number" will expose a numeric input).

Shiny inputs/outputs in modals

While simple input modals are useful for retrieving input from the user, they aren't very flexible - they only allow one input. You can include any Shiny UI code in a modal, including Shiny inputs and outputs (such as plots), by providing Shiny tags in the text parameter and setting html=TRUE. For example, the following code would produce a modal with two inputs:

shinyalert(html = TRUE, text = tagList(
  textInput("name", "What's your name?", "Dean"),
  numericInput("age", "How old are you?", 30)
))

Modal return value

Modals created with {shinyalert} have a return value when they exit.

When using a simple input modal (type="input"), the value of the modal is the value the user entered. Otherwise, the value of the modal is TRUE if the user clicked the "OK" button, and FALSE if the user dismissed the modal (either by clicking the "Cancel" button, using the Escape key, clicking outside the modal, or letting the timer run out).

The return value of the modal can be accessed via input$shinyalert (or using a different input ID if you specify the inputId parameter), as if it were a regular Shiny input. The return value can also be accessed using the modal callbacks.

Callbacks

The return value of the modal is passed as an argument to the callbackR and callbackJS functions (if a callbackR or callbackJS arguments are provided). These functions get called (in R and in JavaScript, respectively) when the modal exits.

For example, using the following {shinyalert} code will result in a modal with an input field. After the user clicks "OK", a hello message will be printed to both the R console and in a native JavaScript alert box. You don't need to provide both callback functions, but in this example both are used for demonstration.

shinyalert(
  "Enter your name", type = "input",
  callbackR = function(x) { message("Hello ", x) },
  callbackJS = "function(x) { alert('Hello ' + x); }"
)

Notice that the callbackR function accepts R code, while the callbackJS function uses JavaScript code.

Since closing the modal with the Escape key results in a return value of FALSE, the callback functions can be modified to not print anything in that case.

shinyalert(
  "Enter your name", type = "input",
  callbackR = function(x) { if(x != FALSE) message("Hello ", x) },
  callbackJS = "function(x) { if (x !== false) { alert('Hello ' + x); } }"
)

Chaining modals

It's possible to chain modals (call multiple modals one after another) by making a shinyalert() call inside a {shinyalert} callback or using the return value of a previous modal. For example:

shinyalert(
  title = "What is your name?", type = "input",
  callbackR = function(value) { shinyalert(paste("Welcome", value)) }
)

Using in Rmarkdown files

You can use {shinyalert} in Rmarkdown documents as well. This only works in interactive Rmd documents (when runtime: shiny is used in the YAML).

---
output: html_document
runtime: shiny
---

```{r}
library(shinyalert)

textInput("name", "Name")
actionButton("button", "Click me")

observeEvent(input$button, {
  shinyalert(title = "Hey", text = input$name)
})
```

Pre-loading the scripts

The first time a {shinyalert} message is shown, the required scripts are automatically inserted to the Shiny app. In real browsers (Chrome/Firefox/etc) this is not an issue, but in some contexts, such as inside RStudio's Viewer on some operating systems, this can sometimes cause the modal to appear glitchy for a brief moment until the scripts load.

If you notice this behaviour and prefer to pre-load the scripts when the Shiny app initializes, you can call useShinyalert(force=TRUE) anywhere in the UI. Note that calling useShinyalert() is NOT required.

Comparison with Shiny modals

Doesn't Shiny already have support for modals?

Yes, it does.

And Shiny's modals are just fine.

I created {shinyalert} for two reasons: first of all, I started working on it well before Shiny had modals. But I decided to keep working on it and release it even afterwards because I find {shinyalert} to be easier to use and to result in much nicer modals. There are also some extra features in {shinyalert}, such as the callback functions and the timer. But ultimately it's a matter of convenience and aesthetics.

Known issues

  • Clicking any <button> tag inside a modal will close the modal. This is due to the underlying JavaScript library having this issue. This means that, for example, using radio buttons from {shinyWidgets} will cause this bug because their radio buttons are implemented using <button>.
  • Chaining modals works fine when the modals contain only text, but when inputs or buttons are involved in chained modals, you may run into an issue such as this one or this one.

Credits

Logo design by Alfredo Hernรกndez.

More Repositories

1

beautiful-jekyll

โœจ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com
HTML
5,297
star
2

advanced-shiny

๐Ÿคน Shiny tips & tricks for improving your apps and solving common problems
R
1,196
star
3

addinslist

๐Ÿ“œ Discover and install useful RStudio addins
R
840
star
4

shinyjs

๐Ÿ’ก Easily improve the user experience of your Shiny apps in seconds
R
730
star
5

timevis

๐Ÿ“… Create interactive timeline visualizations in R
R
654
star
6

shinycssloaders

โŒ› Add loading animations to a Shiny output while it's recalculating
CSS
400
star
7

ggExtra

๐Ÿ“Š Add marginal histograms to ggplot2, and more ggplot2 enhancements
R
379
star
8

shiny-server

My personal Shiny server
R
252
star
9

oldschool-github-extension

Revert GitHub's UI back to its classic look (before the June 23, 2020 update that has a flat, rounded and more whitespaced design).
CSS
227
star
10

colourpicker

๐ŸŽจ A colour picker tool for Shiny and for selecting colours in plots (in R)
JavaScript
214
star
11

shinyforms

๐Ÿ“ Easily create questionnaire-type forms with Shiny
R
162
star
12

shinyscreenshot

๐Ÿ“ท Capture screenshots of entire pages or parts of pages in Shiny apps
R
69
star
13

shinydisconnect

๐Ÿ”Œ Show a nice message when a Shiny app disconnects or errors
R
65
star
14

ddpcr

๐Ÿ”ฌ Analysis and visualization of Droplet Digital PCR data in R and on the web
R
60
star
15

daattali.github.io

Dean Attali's website - R/Shiny Consultant
HTML
58
star
16

shinybrowser

๐ŸŒ Find out information about a user's web browser in Shiny apps
R
40
star
17

lightsout

๐Ÿ”ฆ Lights Out game implemented in R
R
39
star
18

rsalad

A mix of useful R functions that are good for you
R
26
star
19

UBC-STAT545

My first 12 months with R, mostly through a UBC course and my own experiments
HTML
23
star
20

timevisBasic

Helper package to learn advanced 'htmlwidgets' tips
R
22
star
21

gslides-betternotes-extension

The slide previews in the Speaker Notes window of Google Slides are tiny and unreadable. This extension automatically resizes the slides when the window is resized, and allows the user to drag the sidebar to select a size.
JavaScript
21
star
22

statsTerrorismProject

Final project for STAT545A - Terrorist activity data analysis
HTML
20
star
23

github-diff-navigator-extension

Chrome/Firefox extension that allows you to easily navigate through the changes in a file that has been edited on GitHub.
JavaScript
19
star
24

shinytip

๐Ÿ’ฌ Simple flexible tooltips for Shiny apps
R
18
star
25

shinyfilebrowser

๐Ÿ“ Simple file browser and list selector for Shiny apps
R
17
star
26

shinymixpanel

๐Ÿ” Track user interactions with Mixpanel in Shiny apps or R scripts
R
13
star
27

rasperry-pi-gaming-console-setup

How to set up raspberry pi as a portable oldies gaming console
13
star
28

cranalerts

Get email alerts when a CRAN package gets updated
R
11
star
29

shiny-mini-workshop

Shiny Mini Workshop
R
9
star
30

single-page-amazon-return-labels-extension

Print Amazon return labels as a single page
JavaScript
9
star
31

settlers-catan-turn-analyzer

Settlers of Catan Turn Analyzer - a simple app to teach myself ReactJS
JavaScript
8
star
32

shinycodeviewer

๐Ÿ“ View and edit a series of code chunks with syntax highlighting in Shiny
R
7
star
33

undomanager

๐Ÿ”„ Generic undo/redo manager for R
R
7
star
34

shiny-colour-gradient-input

Colour gradient input for R-Shiny
R
6
star
35

cashflow-calculation-extension

Cashflow Calculator extension for Zillow, Trulia, and Redfin (works in Chrome/Firefox/Edge)
JavaScript
6
star
36

smileyfy-my-facebook-extension

Chrome extension that adds infinite happiness to your Facebook browsing, plus a little bonus rickrolling :)
JavaScript
5
star
37

shinyHelpers

R
5
star
38

shiny-workshop-odsc2019

Shiny Workshop at ODSC 2019 (visualizing NBA 2018/19 player stats)
R
5
star
39

modularize-addin

RStudio addin to help modularize Shiny app code
R
4
star
40

useR2017

Analysis of useR2017 attendance information
R
3
star
41

bingo

Generate Bingo cards with R.
R
3
star
42

Rlist

Easy way to navigate and explore list structures in R (abandoned project)
R
2
star
43

dash2

R
2
star
44

shiny-training-rstudioconf-2018

R
2
star
45

presentations

A place for me to keep my presentations/papers/etc organized
2
star
46

pftv-ad-bypass-extension

Project Free TV shows an interstitial ad page before allowing users to continue to the video - this extension bypasses that page
JavaScript
2
star
47

attalitech

AttaliTech Ltd
CSS
1
star
48

shinywc

R
1
star
49

shiny-conf-nyr-2022

R
1
star
50

stat540-2014-attali-dean

Lab work for UBC STAT540
R
1
star
51

htmldependencybug

JavaScript
1
star
52

genes-track-demo

HTML
1
star