Shinyjs

The potent R package Shiny makes it possible to build interactive web applications without writing any HTML, CSS, or JavaScript. Sometimes, though, you want to include some bespoke features to your Shiny app that isn’t feasible with Shiny by itself. Right here is where Shinyjs steps in.

Using JavaScript code in your Shiny apps is made simple with the R package Shinyjs. JavaScript functions can be used with Shinyjs to modify the HTML components of your Shiny app, add custom animations, and even build custom input and output bindings. We will go over several of Shinyjs’ main capabilities and how to apply them to improve your Shiny apps in this blog post.

Kicking Off with Shinyjs
Shinyjs requires installation and loading of the package in your R script before you can use it. Commands for doing this are as follows:

install.packages("shinyjs")
library(shiny)
library(shinyjs)

Following package loading, your Shiny app must include the Shinyjs library. You may achieve this by including the code below to your app’s UI component:

ui <- fluidPage(
  useShinyjs(),
  # other UI code here
)

Shinyjs library is included into your app and all of its functions are made available by the useShinyjs() function.

Utilising Shinyjs Functions
Shinyjs gives you a lot of tools to work with the HTML components of your Shiny app. Among the most often used Shinyjs features are:

Shut up and reveal
Your Shiny app can have HTML elements hidden or shown using the hide() and show() methods. Using the following code, for instance, you can hide a div element with the ID “myDiv” when a button is clicked:

ui <- fluidPage(
  useShinyjs(),
  actionButton("hideButton", "Hide Div"),
  div(id = "myDiv", "This is my div element.")
)

server <- function(input, output, session) {
  observeEvent(input$hideButton, {
    hide("myDiv")
  })
}

shinyApp(ui, server)

You can also use the show() function to show the div element again:

observeEvent(input$showButton, {
  show("myDiv")
})

ui <- fluidPage(
  useShinyjs(),
  actionButton("disableButton", "Disable Input"),
  textInput("myInput", "This is my input element.")
)

server <- function(input, output, session) {
  observeEvent(input$disableButton, {
    disable("myInput")
  })
}

shinyApp(ui, server)

observeEvent(input$enableButton, {
  enable("myInput")
})

ui <- fluidPage(
  useShinyjs(),
  actionButton("resetButton", "Reset Input"),
  numericInput("myNumber", "This is my number input.", value = 10)
)

server <- function(input, output, session) {
  observeEvent(input$resetButton, {
    reset("myNumber")
  })
}

shinyApp(ui, server)