fireworks

Wrapper around the fireworks-js lib that can be used in Shiny ✨. Full screen overlay or specific HTML elements, you choose!

Installation

You can install the development version of fireworks from Github with:

pak::pak("hypebright/fireworks")

Usage

Fireworks in Shiny, how cool is that? ✨🎆

You can add fireworks in the UI, or you can launch and stop fireworks from the server. Examples can be found in /inst/examples.

Calling fireworks() in the UI:

library(shiny)
library(fireworks)

ui <-
  fluidPage(
    titlePanel("Fireworks in Shiny!"),
    mainPanel(
      fireworks(id = "myFireworks")
    )
  )

server <- function(input, output) {}

shinyApp(ui, server)

In this case, the fireworks is a <div> with a specified width and height.

To use fireworks as a full screen overlay or an specific existing HTML element, you can launch and stop fireworks from the server. Don't forget to attach dependencies with useFireworks():

library(shiny)
library(fireworks)

ui <-
  fluidPage(
    titlePanel("Fireworks in Shiny!"),
    useFireworks(), # add dependencies
    actionButton("launch", "Launch fireworks"),
    actionButton("stop", "Stop fireworks")
  )
  
server <- function(input, output, session) {

  # when no id given, fireworks will be a full screen overlay
  fw <- Fireworks$new()

  observe({
    fw$start()
  }) |> bindEvent(input$launch)

  observe({
    fw$stop()
  }) |> bindEvent(input$stop)

}

shinyApp(ui, server)

To add fireworks to an individual element, you can use the id argument:

library(shiny)
library(fireworks)

ui <-
  fluidPage(
    tags$title("Fireworks 🎆"),
    tags$h2("Fireworks in Shiny!"),
    useFireworks(),
    actionButton("launch", "Launch Fireworks"),
    plotOutput("plot", width = "100%", height = "400px"),
  )
  
server <- function(input, output, session) {

  fw <- Fireworks$new(id = "plot")

  output$plot <- renderPlot({
    plot(cars)
  })

  observe({
    fw$start()
    Sys.sleep(3)
    fw$stop()
  }) |> bindEvent(input$launch)

}

shinyApp(ui, server)

Options

You can pass options to fireworks() and Fireworks$new() to customize the fireworks. A full list of options can be found on the fireworks-js GitHub page.

For example:

fireworks(id = "myFireworks",
          options = list(hue = list(min = 0, max = 45),
                         explosion = 10,
                         traceSpeed = 5))

or:

fw <- Fireworks$new(options = list(hue = list(min = 0, max = 45),
                                   explosion = 10,
                                   traceSpeed = 5))

Natural stop effect

By default, fireworks are removed immediately when stop is called. You can add a natural stop effect by setting fadeOut = TRUE:

fw$stop(fadeOut = TRUE)

The effects takes 2000ms and changes the intensity of the fireworks to 1:

Acknowledgements

As this is a wrapper around an existing library, I want to give credit to the original authors:

• fireworks-js
• Vitalij Ryndin