<h3 align="center">shinyjs</h3> <h4 align="center"> 💡 Easily improve the user experience of your Shiny apps in seconds <br><br> <a href="https://deanattali.com/shinyjs/">Official website</a> · by <a href="https://deanattali.com">Dean Attali</a> </h4> <p align="center"> <a href="https://github.com/daattali/shinyjs/actions"> <img src="https://github.com/daattali/shinyjs/workflows/R-CMD-check/badge.svg" alt="R build status" /> </a> <a href="https://cran.r-project.org/package=shinyjs"> <img src="https://www.r-pkg.org/badges/version/shinyjs" alt="CRAN version" /> </a> <a href="https://www.paypal.com/paypalme/daattali/20"> <img src="https://i.imgur.com/vCIGFrH.png" /> </a> </p>

{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.<br/> 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

<h2 id="demos"> Demos and tutorials </h2>

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.

<h2 id="sponsors"> Sponsors 🏆 </h2>

There are no sponsors yet

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

<h2 id="overview-main"> Overview of main functions </h2>

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

<table> <colgroup> <col style="width: 28%" /> <col style="width: 71%" /> </colgroup> <thead> <tr class="header"> <th>Function</th> <th>Description</th> </tr> </thead> <tbody> <tr class="odd"> <td><code>show</code>/<code>hide</code>/<code>toggle</code></td> <td>Display or hide an element (optionally with an animation).</td> </tr> <tr class="even"> <td><code>hidden</code></td> <td>Initialize a Shiny tag as invisible (can be shown later with a call to <code>show</code>).</td> </tr> <tr class="odd"> <td><code>enable</code>/<code>disable</code>/<code>toggleState</code></td> <td>Enable or disable an input element, such as a button or a text input.</td> </tr> <tr class="even"> <td><code>disabled</code></td> <td>Initialize a Shiny input as disabled.</td> </tr> <tr class="odd"> <td><code>reset</code></td> <td>Reset a Shiny input widget back to its original value.</td> </tr> <tr class="even"> <td><code>refresh</code></td> <td>Refresh the page.</td> </tr> <tr class="odd"> <td><code>delay</code></td> <td>Execute R code (including any {shinyjs} functions) after a specified amount of time.</td> </tr> <tr class="even"> <td><code>alert</code></td> <td>Show a message to the user.</td> </tr> <tr class="odd"> <td><code>click</code></td> <td>Simulate a click on a button.</td> </tr> <tr class="even"> <td><code>html</code></td> <td>Change the text/HTML of an element.</td> </tr> <tr class="odd"> <td><code>onclick</code></td> <td>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.</td> </tr> <tr class="even"> <td><code>onevent</code></td> <td>Similar to <code>onclick</code>, but can be used with many other events instead of click (for example, listen for a key press, mouse hover, etc).</td> </tr> <tr class="odd"> <td><code>removeEvent</code></td> <td>Remove an event that was added to an HTML element with <code>onclick()</code> or <code>onevent()</code>.</td> </tr> <tr class="even"> <td><code>addClass</code>/<code>removeClass</code>/<code>toggleClass</code></td> <td>add or remove a CSS class from an element.</td> </tr> <tr class="odd"> <td><code>runjs</code></td> <td>Run arbitrary JavaScript code.</td> </tr> <tr class="even"> <td><code>extendShinyjs</code></td> <td>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.</td> </tr> </tbody> </table>

Functions that help you during Shiny app development

<table> <colgroup> <col style="width: 28%" /> <col style="width: 71%" /> </colgroup> <thead> <tr class="header"> <th>Function</th> <th>Description</th> </tr> </thead> <tbody> <tr class="odd"> <td><code>runcode</code></td> <td>Adds a text input to your app that lets you run arbitrary R code live.</td> </tr> <tr class="even"> <td><code>showLog</code></td> <td>Print any JavaScript <code>console.log()</code> messages in the R console, to make it easier and quicker to debug apps without having to open the JS console.</td> </tr> <tr class="odd"> <td><code>logjs</code></td> <td>Print a message to the JavaScript console (mainly used for debugging purposes).</td> </tr> <tr class="even"> <td><code>inlineCSS</code></td> <td>Easily add inline CSS to a Shiny app.</td> </tr> </tbody> </table>

Check out the {shinyjs} demo app to see some of these in action, or install {shinyjs} and run shinyjs::runExample() to see more demos.

<h2 id="install"> Installation </h2>

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 func

Shinyjs

Install / Use

README

Table of contents

Functions that help you during Shiny app development