shinyjs

Easily improve the user experience of your Shiny apps in seconds
Official website
· Copyright 2016 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.

shinyjs is under the AGPL-3 license. For a commercial license, please
contact me. If you find shinyjs
useful, please consider supporting its development!

Table of contents

• Demos and tutorials
• 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
• More resources

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.

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.

Functions that help you during Shiny app development

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("devtools")
devtools::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().

• How do I show/hide the shinydashboard sidebar
  programmatically?
• How do I hide/disable a
  tab?
• How do I refresh the
  page?
• How do I call a JavaScript function from a different JavaScript
  library?
• How do I change the values of a
  sliderInput?
• How do I call JavaScript code and use the return
  value?

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

More resources

This document is meant to serve as a high overview of shinyjs. There are
three more documents provided in shinyjs to teach you various aspects of
the package:

• Including shinyjs in different types of
  apps
• shinyjs example app
  walk-through
• extendShinyjs: Calling your own JavaScript functions from
  R

If you need help with shinyjs, a good place to start is to try to get
help from the community. I suggest browsing the shinyjs
tag on StackOverflow or asking
your own question there. You can also try getting help on the RStudio
Community forums.

If you still can't get an answer to your question, you can contact
me. However, because of the high volume
of support emails I receive daily, I can only provide support for a fee
(as part of my Shiny consulting).

Motivation & alternatives using native Shiny

The initial release of this package was announced on my
blog and
discusses these topics.

Contributions

If you have any suggestions or feedback, I would love to hear about it.
You can either message me directly,
open an issue if you want
to request a feature/report a bug, or make a pull request if you can
contribute.

I'd like to give special thanks to the Shiny developers, especially Joe
Cheng for always answering all my Shiny
questions.

Lastly, if you find shinyjs useful, please consider supporting
me for the countless hours I've
spent building, documenting, and supporting this package :)