https://github.com/daattali/shinyjs
💡 Easily improve the user experience of your Shiny apps in seconds
https://github.com/daattali/shinyjs
javascript r r-package rstats shiny shiny-r
Last synced: 9 months ago
JSON representation
💡 Easily improve the user experience of your Shiny apps in seconds
- Host: GitHub
- URL: https://github.com/daattali/shinyjs
- Owner: daattali
- License: other
- Created: 2015-01-26T03:42:36.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2025-04-12T02:08:34.000Z (11 months ago)
- Last Synced: 2025-04-12T11:58:17.442Z (11 months ago)
- Topics: javascript, r, r-package, rstats, shiny, shiny-r
- Language: R
- Homepage: https://deanattali.com/shinyjs
- Size: 3.52 MB
- Stars: 740
- Watchers: 36
- Forks: 118
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: NEWS.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-R - shinyjs - Easily improve the user interaction and user experience in your Shiny apps in seconds. (Web Technologies and Services)
- awesome-rshiny - shinyjs - Common JavaScript operations in shiny via R code. (Tools / Packages)
- jimsghstars - daattali/shinyjs - 💡 Easily improve the user experience of your Shiny apps in seconds (R)
- awesome-R - shinyjs - Easily improve the user interaction and user experience in your Shiny apps in seconds. (Web Technologies and Services)
- awesome-R - shinyjs - Easily improve the user interaction and user experience in your Shiny apps in seconds. (Web Technologies and Services)
- awesome-shiny-extensions - shinyjs - Perform common JavaScript operations in Shiny apps. (UI Components / Advanced Interactivity)
README
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
runcode
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/).