### 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.
If you find {shinyjs} useful, please consider supporting my work to unlock rewards! ❤

> 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 straightforward 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 | 🔗
shinyforms | 📝 Easily create questionnaire-type forms with Shiny | WIP

# Table of contents

- 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

## 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.

## Sponsors 🏆

> There are no sponsors yet

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

## 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 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("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 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}.

## Support

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 any issue and require my personal help, please visit https://xscode.com/daattali/shinyjs or contact me.

## Credits

Logo design by Alfredo Hernández.