A typical Shiny app has a UI portion and a server portion. Before using most shinyjs functions, you need to calluseShinyjs() in the app's UI. It's best to include it near the top as a convention.
Here is a minimal Shiny app that usesshinyjs:
library(shiny)library(shinyjs)ui <- fluidPage( useShinyjs(), # Include shinyjs actionButton("button", "Click me"), textInput("text", "Text"))server <- function(input, output) { observeEvent(input$button, { toggle("text") # toggle is a shinyjs function })}shinyApp(ui, server)This is how most Shiny apps should initializeshinyjs - by callinguseShinyjs() near the top of the UI.
However, if you use shinyjs in any of the following cases:
shinydashboard package)navbarPage layoutThen the following sections will show you how you to include shinyjs.
shinydashboard is an R package that lets you create nice dashboards with Shiny. Since it has a different structure than typical Shiny apps, it can be unclear where to include the call touseShinyjs() in these apps. It is recommended to place the call touseShinyjs() in the beginning ofdashboardBody(). For example, here is a minimal Shiny dashboard that usesshinyjs:
library(shiny)library(shinydashboard)library(shinyjs)ui <- dashboardPage( dashboardHeader(), dashboardSidebar(), dashboardBody( useShinyjs(), actionButton("button", "Click me"), div(id = "hello", "Hello!") ))server <- function(input, output) { observeEvent(input$button, { toggle("hello") })}shinyApp(ui, server)When creating a Shiny app that uses anavbarPage layout, the call touseShinyjs() can be placed inside any of the tabs (since the only real requirement is that it will be presentsomewhere in the UI). While havinguseShinyjs() inside the contents of any tab will work, there is another method that is preferred. You can wrap thenavbarPage in atagList, and calluseShinyjs() within thetagList. This way,shinyjs gets set up in a way that is independent of each of the tabs. For example, here is a minimal Shiny app that usesshinyjs inside anavbarPage layout:
library(shiny)library(shinyjs)ui <- tagList( useShinyjs(), navbarPage( "shinyjs with navbarPage", tabPanel("tab1", actionButton("button", "Click me"), div(id = "hello", "Hello!")), tabPanel("tab2") ))server <- function(input, output, session) { observeEvent(input$button, { toggle("hello") })}shinyApp(ui, server)It is possible to embed Shiny components in an R Markdown document, resulting in interactive R Markdown documents. More information on how to use these documents is availableon the R Markdown website. Even though interactive documents don't explicitly specify a UI and a server, usingshinyjs is still easy: simply calluseShinyjs(rmd = TRUE) (note thermd = TRUE argument). For example, the following code can be used inside an R Markdown code chunk (assuming the Rmd document is set up withruntime: shiny as the link above describes):
library(shinyjs)useShinyjs(rmd = TRUE)actionButton("button", "Click me")div(id = "hello", "Hello!")observeEvent(input$button, { toggle("hello")})If the Rmd file makes use ofTabbed Sections (using{.tabset}), then you should include the call touseShinyjs(rmd = TRUE) before the tabset definition, near the beginning of the file.
If you're using theshiny_prerendered Rmd format, you need to include the following code in the beginning of your Rmd file, just after the YAML header (you need to remove the spaces between the backticks to make this code work):
```{r, echo=FALSE}shiny::addResourcePath("shinyjs", system.file("srcjs", package = "shinyjs"))shinyjs::useShinyjs(html = TRUE)<h2 id="usage-html">Using shinyjs when the user interface is built using an HTML file/template</h2>While most Shiny apps use Shiny's functions to build a user interface to the app, it is possible to build the UI with an HTML template, [as RStudio shows in this article](https://shiny.rstudio.com/articles/templates.html). In this case, you simply need to add `{{ useShinyjs() }}` somewhere in the template, preferably inside the `<head>...</head>` tags.A similar way to create your app's UI with HTML is to write it entirely in HTML (without templates), [as RStudio shows in this article](https://shiny.rstudio.com/articles/html-ui.html). Building Shiny apps like this is much more complicated and should only be used if you're very comfortable with HTML. Using `shinyjs` in these apps is possible but it works a little differently since there is no `ui.R` to call `useShinyjs()` from. There are three simple steps to take in order to use `shinyjs` in these apps:- Create a `global.R` file in the same directory as your `server.R`, and add the following line to the file: shiny::addResourcePath("shinyjs", system.file("srcjs", package = "shinyjs"))- In the `index.html` file you need to load a special JavaScript file named `shinyjs/inject.js`. You do this by adding the following line to the HTML's `<head>` tag: `<script src="shinyjs/inject.js"></script>`- In your server function (the `shinyServer` function) you need to call `useShinyjs(html = TRUE)`After adding these three lines to your code, you can use all `shinyjs` functions as usual.