{shinyjs} lets you perform common useful JavaScript operations inShiny apps that will greatly improve your apps without having to knowany JavaScript.
Examples include: hiding an element, disabling an input, resetting aninput back to its original value, delaying code execution by a fewseconds, and many more useful functions for both the end user and thedeveloper. {shinyjs} can also be used to easily call your own customJavaScript functions from R.
Need Shiny help?I’mavailable for consulting.
If you find{shinyjs} useful, please considersupporting my work tounlock rewards! ❤
This package is part of a larger ecosystem of packages with a sharedvision: solving common Shiny issues and improving Shiny apps withminimal effort, minimal code changes, and straightforward documentation.Other packages for your Shiny apps:
| Package | Description | Demo |
|---|---|---|
| shinyalert | 🗯️ Easily create pretty popup messages (modals) in Shiny | 🔗 |
| 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 | 🔗 |
| shinyforms | 📝 Easily create questionnaire-type forms with Shiny | WIP |
There are no sponsors yet
Becomethe first sponsor for {shinyjs} and unlock special rewards!
Note: In order to use any {shinyjs} function in a Shiny app,you must first calluseShinyjs() anywhere in the app’sUI.
| Function | Description |
|---|---|
show/hide/toggle | Display or hide an element (optionally with an animation). |
hidden | Initialize a Shiny tag as invisible (can be shown later with a call toshow). |
enable/disable/toggleState | Enable or disable an input element, such as a button or a text input. |
disabled | Initialize a Shiny input as disabled. |
reset | Reset a Shiny input widget back to its original value. |
refresh | Refresh the page. |
delay | Execute R code (including any {shinyjs} functions) after a specifiedamount of time. |
alert | Show a message to the user. |
click | Simulate a click on a button. |
html | Change the text/HTML of an element. |
onclick | Run R code when a specific element is clicked. Was originally developedwith the sole purpose of running a {shinyjs} function when an element isclicked, though any R code can be used. |
onevent | Similar toonclick, but can be used with many other eventsinstead of click (for example, listen for a key press, mouse hover,etc). |
removeEvent | Remove an event that was added to an HTML element withonclick() oronevent(). |
addClass/removeClass/toggleClass | add or remove a CSS class from an element. |
runjs | Run arbitrary JavaScript code. |
extendShinyjs | Allows you to write your own JavaScript functions and use {shinyjs} tocall them as if they were regular R code. More information is availablein the section “Calling your own JavaScript functions from R” below. |
| Function | Description |
|---|---|
runcodeUI+runcodeServer | Adds a text input to your app that lets you run arbitrary R code live. |
showLog | Print any JavaScriptconsole.log() messages in the Rconsole, to make it easier and quicker to debug apps without having toopen the JS console. |
logjs | Print a message to the JavaScript console (mainly used for debuggingpurposes). |
inlineCSS | Easily add inline CSS to a Shiny app. |
Check out the {shinyjs}demo app to see some of these in action, or install {shinyjs} andrunshinyjs::runExample() to see more demos.
To install the stable CRAN version:
install.packages("shinyjs")To install the latest development version from GitHub:
install.packages("remotes")remotes::install_github("daattali/shinyjs")A typical Shiny app has a UI portion and a server portion. Beforeusing most {shinyjs} functions, you need to calluseShinyjs() in the app’s UI. It’s best to include it nearthe top as a convention.
Here is a minimal Shiny app that uses {shinyjs}:
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 initialize {shinyjs} - by callinguseShinyjs() near the top of the UI.
However, if you use {shinyjs} in any of the following cases:
shinydashboardpackage)navbarPage layoutThen you should see theIncluding {shinyjs}in different types of apps document.
If your Shiny app doesn’t fall into any of these categories, then theabove code sample should be enough to get your started with including{shinyjs} in your app.
See the{shinyjs} example appwalk-through document for a step-by-step guide on how to add avariety of {shinyjs} features to a simple app in order to make it moreuser friendly.
You can also use {shinyjs} to add your own JavaScript functions thatcan be called from R as if they were regular R functions usingextendShinyjs(). This is only suitable for advanced userswho are familiar with JavaScript and wish to facilitate thecommunication between R and JavaScript.
To learn about this feature and see how useful it can be, see theextendShinyjs: Callingyour own JavaScript functions from R document.
There are several questions that pop up very frequently in my emailor on StackOverflow about “How do I use {shinyjs} to do ___?” Here is alist of a few of these common questions with links to a solution thatcould be useful. Note that all of these require usingextendShinyjs().
shinydashboard sidebarprogrammatically?sliderInput?I also keep a longlist of variousShiny tips & tricks for solving common Shiny problems, many ofwhich make use of {shinyjs}.
This document is only an overview of {shinyjs}. There are morein-depth resources available on the{shinyjs} website.
If you need help with {shinyjs}, free support is available onStackOverflow,RStudioCommunity, andTwitter.
Due to the large volume of requests I receive, I’m unable toprovide free support. If you can’t solve any issue and require mypersonal help, please visithttps://xscode.com/daattali/shinyjs orcontact me.
Logo design byAlfredoHernández.