shinyjs

Easily improve the user experience of your Shiny apps in seconds

Official website · by Dean Attali

{shinyjs} lets you perform common useful JavaScript operations in Shiny apps that will greatly improve your apps without having to know any JavaScript.

Examples include: hiding an element, disabling an input, resetting an input back to its original value, delaying code execution by a few seconds, and many more useful functions for both the end user and the developer. {shinyjs} can also be used to easily call your own custom JavaScript functions from R.

Need Shiny help? I'm available for consulting.
If you find {shinyjs} useful, please consider supporting my work to unlock rewards! ❤

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 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

Demos and tutorials
Sponsors 🏆
Overview of main functions
Installation
How to use
Basic use case - complete working example
Calling your own JavaScript functions from R
FAQ and extra tricks
Support

Demos and tutorials

Demo Shiny app that lets you play around with some of the functionality in {shinyjs}.
Video of my {shinyjs} talk (30 min) and the corresponding presentation slides from the 2016 Shiny Developer Conference.
Video of my {shinyjs} talk (5 min) and the corresponding presentation slides from the 2016 useR Conference.

Sponsors 🏆

There are no sponsors yet

Become the first sponsor for {shinyjs} and unlock special rewards!

Overview of main functions

Note: In order to use any {shinyjs} function in a Shiny app, you must first call useShinyjs() anywhere in the app's UI.

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 to `show`).
`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 specified amount 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 developed with the sole purpose of running a {shinyjs} function when an element is clicked, though any R code can be used.
`onevent`	Similar to `onclick`, but can be used with many other events instead of click (for example, listen for a key press, mouse hover, etc).
`removeEvent`	Remove an event that was added to an HTML element with `onclick()` or `onevent()`.
`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} to call them as if they were regular R code. More information is available in the section “Calling your own JavaScript functions from R” below.

Functions that help you during Shiny app development

Function	Description
`runcodeUI`+`runcodeServer`	Adds a text input to your app that lets you run arbitrary R code live.
`showLog`	Print any JavaScript `console.log()` messages in the R console, to make it easier and quicker to debug apps without having to open the JS console.
`logjs`	Print a message to the JavaScript console (mainly used for debugging purposes).
`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} and run shinyjs::runExample() to see more demos.

Installation

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")

How to use

A typical Shiny app has a UI portion and a server portion. Before using most {shinyjs} functions, you need to call useShinyjs() in the app's UI. It's best to include it near the 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 calling useShinyjs() near the top of the UI.

However, if you use {shinyjs} in any of the following cases:

In Shiny dashboards (built using the shinydashboard package)
In Shiny apps that use a navbarPage layout
In Rmd documents
In Shiny apps that manually build the user interface with an HTML file or template (instead of using Shiny's UI functions)

Then you should see the Including {shinyjs} in different types of apps document.

If your Shiny app doesn't fall into any of these categories, then the above code sample should be enough to get your started with including {shinyjs} in your app.

Basic use case - complete working example

See the {shinyjs} example app walk-through document for a step-by-step guide on how to add a variety of {shinyjs} features to a simple app in order to make it more user friendly.

Calling your own JavaScript functions from R

You can also use {shinyjs} to add your own JavaScript functions that can be called from R as if they were regular R functions using extendShinyjs(). This is only suitable for advanced users who are familiar with JavaScript and wish to facilitate the communication between R and JavaScript.

To learn about this feature and see how useful it can be, see the extendShinyjs: Calling your own JavaScript functions from R document.

FAQ and extra tricks

There are several questions that pop up very frequently in my email or on StackOverflow about “How do I use {shinyjs} to do ___?” Here is a list of a few of these common questions with links to a solution that could be useful. Note that all of these require using extendShinyjs().

I also keep a long list of various Shiny tips & tricks for solving common Shiny problems, many of which make use of {shinyjs}.

Support

This document is only an overview of {shinyjs}. There are more in-depth resources available on the {shinyjs} website.

If you need help with {shinyjs}, free support is available on StackOverflow, RStudio Community, and Twitter.

Due to the large volume of requests I receive, I'm unable to provide free support. If you can't solve any issue and require my personal help, please visit https://xscode.com/daattali/shinyjs or contact me.

Credits

Logo design by Alfredo Hernández.