shinyjs - Easily improve the user interaction and user experience in your Shiny apps in seconds
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 commerical use under a different 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
- Colour Picker input & addin
- More resources
- 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.
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.
install.packages("shinyjs")
To install the latest development version from GitHub:
install.packages("devtools")
devtools::install_github("daattali/shinyjs")
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 interactive 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.
To learn about this feature and see how useful it can be, see the extendShinyjs: Calling your own JavaScript functions from R document.
- 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?
shinyjs
has a colourInput()
function that lets you add a colour
picker widget to Shiny apps. There is also a colour picker RStudio addin
(accessed through the Addins menu) and a gadget (accessed with the
colourPicker()
function) that can be used to easily select colours.
The screenshot below is from the colour picker addin. You can also view
a short GIF demo of the addin.
- Including shinyjs in different types of apps
- shinyjs example app walk-through
- extendShinyjs: Calling your own JavaScript functions from R
If you need help, I strongly suggest browsing the shinyjs tag on StackOverflow or asking your own question there. Of course you can also email me directly if you're in desperate need of help, or open an issue for bugs.
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 :)