π‘ 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! β€
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 clear 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 | π |
shinytip | π¬ Simple flexible tooltips for Shiny apps | WIP |
shinymixpanel | π Track user interactions with Mixpanel in Shiny apps or R scripts | WIP |
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
- 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.
There are no sponsors yet
Become the first sponsor for {shinyjs} and unlock special rewards!
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. |
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.
For most users: To install the stable CRAN version:
install.packages("shinyjs")
For advanced users: 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. 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.
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.
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.
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}.
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 an issue and require paid help, please contact me.
Logo design by Alfredo HernΓ‘ndez.