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](https://attalitech.com/).**
**If you find {shinyjs} useful, please consider [supporting my work](https://github.com/sponsors/daattali)! ❤**

> 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](https://github.com/daattali/shinyalert/) | 🗯️ Easily create pretty popup messages (modals) in Shiny | [🔗](https://daattali.com/shiny/shinyalert-demo/) | | [shinyscreenshot](https://github.com/daattali/shinyscreenshot/) | 📷 Capture screenshots of entire pages or parts of pages in Shiny apps | [🔗](https://daattali.com/shiny/shinyscreenshot-demo/) | | [timevis](https://github.com/daattali/timevis/) | 📅 Create interactive timeline visualizations in R | [🔗](https://daattali.com/shiny/timevis-demo/) | | [shinycssloaders](https://github.com/daattali/shinycssloaders/) | ⌛ Add loading animations to a Shiny output while it's recalculating | [🔗](https://daattali.com/shiny/shinycssloaders-demo/) | | [colourpicker](https://github.com/daattali/colourpicker/) | 🎨 A colour picker tool for Shiny and for selecting colours in plots | [🔗](https://daattali.com/shiny/colourInput/) | | [shinybrowser](https://github.com/daattali/shinybrowser/) | 🌐 Find out information about a user's web browser in Shiny apps | [🔗](https://daattali.com/shiny/shinybrowser-demo/) | | [shinydisconnect](https://github.com/daattali/shinydisconnect/) | 🔌 Show a nice message when a Shiny app disconnects or errors | [🔗](https://daattali.com/shiny/shinydisconnect-demo/) | | [shinytip](https://github.com/daattali/shinytip/) | 💬 Simple flexible tooltips for Shiny apps | WIP | | [shinymixpanel](https://github.com/daattali/shinymixpanel/) | 🔍 Track user interactions with Mixpanel in Shiny apps or R scripts | WIP | | [shinyforms](https://github.com/daattali/shinyforms/) | 📝 Easily create questionnaire-type forms with Shiny | WIP | # Table of contents - [Demos and tutorials](#demos) - [Sponsors 🏆](#sponsors) - [Overview of main functions](#overview-main) - [Installation](#install) - [How to use](#usage) - [Basic use case - complete working example](#usecase) - [Calling your own JavaScript functions from R](#extendshinyjs) - [FAQ and extra tricks](#faq-tricks) - [Support](#support)

Demos and tutorials

- [Demo Shiny app](https://deanattali.com/shinyjs/demo) that lets you play around with some of the functionality in {shinyjs}. - [Video of my {shinyjs} talk](https://deanattali.com/shinyjs-shinydevcon-2016/) (30 min) and the corresponding [presentation slides](https://docs.google.com/presentation/d/1XyBrIA97ZWIkm8NICAyWHo4J9hj_i2-mJmKEq_CR2A8/edit?usp=sharing) from the 2016 Shiny Developer Conference. - [Video of my {shinyjs} talk](https://deanattali.com/shinyjs-user-2016/) (5 min) and the corresponding [presentation slides](https://docs.google.com/presentation/d/1owJpLTmfV-53Ca9NJIweBMANsmjaErKXNzw_sCTuBAw/edit?usp=sharing) from the 2016 useR Conference.

Sponsors 🏆

> There are no sponsors yet [Become the first sponsor for {shinyjs} and unlock special rewards!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856)

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](https://deanattali.com/shinyjs/demo) to see some of these in action, or install {shinyjs} and run `shinyjs::runExample()` to see more demos.

Installation

**For most users:** To install the stable CRAN version: ```r install.packages("shinyjs") ``` **For advanced users:** To install the latest development version from GitHub: ```r 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*](https://deanattali.com/shinyjs/advanced) 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*](https://deanattali.com/shinyjs/example) 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*](https://deanattali.com/shinyjs/extend) 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?](https://stackoverflow.com/a/31306707/3943160) - [How do I hide/disable a tab?](https://stackoverflow.com/a/31719425/3943160) - [How do I refresh the page?](https://stackoverflow.com/a/34758024/3943160) - [How do I call a JavaScript function from a different JavaScript library?](https://github.com/timelyportfolio/sweetalertR/issues/1#issuecomment-151685005) - [How do I change the values of a `sliderInput`?](https://stackoverflow.com/a/31066997/3943160) - [How do I call JavaScript code and use the return value?](https://stackoverflow.com/a/34728125/3943160) I also keep a long [list of various Shiny tips & tricks](https://deanattali.com/blog/advanced-shiny-tips/) 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](https://deanattali.com/shinyjs/). If you need help with {shinyjs}, free support is available on [StackOverflow](https://stackoverflow.com/questions/ask?tags=r+shiny+shinyjs), [RStudio Community](https://community.rstudio.com/new-topic?category=shiny&tags=shinyjs), and [Twitter](https://twitter.com/hashtag/rstats). **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](https://attalitech.com/contact).**

Credits

Logo design by [Alfredo Hernández](https://aldomann.com/).