• Stars
    star
    713
  • Rank 60,904 (Top 2 %)
  • Language
    R
  • License
    Other
  • Created about 9 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ’ก Easily improve the user experience of your Shiny apps in seconds

shinyjs

๐Ÿ’ก Easily improve the user experience of your Shiny apps in seconds

Official website ยท by Dean Attali

R build status CRAN version


{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

Table of contents

Demos and tutorials

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

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")

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().

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 an issue and require paid help, please contact me.

Credits

Logo design by Alfredo Hernรกndez.

More Repositories

1

beautiful-jekyll

โœจ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com
HTML
4,938
star
2

advanced-shiny

๐Ÿคน Shiny tips & tricks for improving your apps and solving common problems
R
1,165
star
3

addinslist

๐Ÿ“œ Discover and install useful RStudio addins
R
806
star
4

timevis

๐Ÿ“… Create interactive timeline visualizations in R
R
632
star
5

shinycssloaders

โŒ› Add loading animations to a Shiny output while it's recalculating
CSS
388
star
6

ggExtra

๐Ÿ“Š Add marginal histograms to ggplot2, and more ggplot2 enhancements
R
374
star
7

shiny-server

My personal Shiny server
R
250
star
8

shinyalert

๐Ÿ—ฏ๏ธ Easily create pretty popup messages (modals) in Shiny
R
225
star
9

oldschool-github-extension

Revert GitHub's UI back to its classic look (before the June 23, 2020 update that has a flat, rounded and more whitespaced design).
CSS
224
star
10

colourpicker

๐ŸŽจ A colour picker tool for Shiny and for selecting colours in plots (in R)
JavaScript
205
star
11

shinyforms

๐Ÿ“ Easily create questionnaire-type forms with Shiny
R
163
star
12

shinyscreenshot

๐Ÿ“ท Capture screenshots of entire pages or parts of pages in Shiny apps
R
67
star
13

shinydisconnect

๐Ÿ”Œ Show a nice message when a Shiny app disconnects or errors
R
63
star
14

ddpcr

๐Ÿ”ฌ Analysis and visualization of Droplet Digital PCR data in R and on the web
R
58
star
15

daattali.github.io

Dean Attali's website - R/Shiny Consultant
HTML
54
star
16

shinybrowser

๐ŸŒ Find out information about a user's web browser in Shiny apps
R
41
star
17

lightsout

๐Ÿ”ฆ Lights Out game implemented in R
R
40
star
18

rsalad

A mix of useful R functions that are good for you
R
26
star
19

timevisBasic

Helper package to learn advanced 'htmlwidgets' tips
R
22
star
20

UBC-STAT545

My first 12 months with R, mostly through a UBC course and my own experiments
HTML
22
star
21

statsTerrorismProject

Final project for STAT545A - Terrorist activity data analysis
HTML
21
star
22

gslides-betternotes-extension

The slide previews in the Speaker Notes window of Google Slides are tiny and unreadable. This extension automatically resizes the slides when the window is resized, and allows the user to drag the sidebar to select a size.
JavaScript
21
star
23

github-diff-navigator-extension

Chrome/Firefox extension that allows you to easily navigate through the changes in a file that has been edited on GitHub.
JavaScript
19
star
24

shinytip

๐Ÿ’ฌ Simple flexible tooltips for Shiny apps
R
17
star
25

shinyfilebrowser

๐Ÿ“ Simple file browser and list selector for Shiny apps
R
15
star
26

rasperry-pi-gaming-console-setup

How to set up raspberry pi as a portable oldies gaming console
13
star
27

cranalerts

Get email alerts when a CRAN package gets updated
R
11
star
28

shinymixpanel

๐Ÿ” Track user interactions with Mixpanel in Shiny apps or R scripts
R
11
star
29

shiny-mini-workshop

Shiny Mini Workshop
R
9
star
30

single-page-amazon-return-labels-extension

Print Amazon return labels as a single page
JavaScript
8
star
31

settlers-catan-turn-analyzer

Settlers of Catan Turn Analyzer - a simple app to teach myself ReactJS
JavaScript
8
star
32

shinycodeviewer

๐Ÿ“ View and edit a series of code chunks with syntax highlighting in Shiny
R
7
star
33

undomanager

๐Ÿ”„ Generic undo/redo manager for R
R
7
star
34

shiny-colour-gradient-input

Colour gradient input for R-Shiny
R
6
star
35

smileyfy-my-facebook-extension

Chrome extension that adds infinite happiness to your Facebook browsing, plus a little bonus rickrolling :)
JavaScript
5
star
36

shiny-workshop-odsc2019

Shiny Workshop at ODSC 2019 (visualizing NBA 2018/19 player stats)
R
5
star
37

shinyHelpers

R
5
star
38

cashflow-calculation-extension

Cashflow Calculator extension for Zillow, Trulia, and Redfin (works in Chrome/Firefox/Edge)
JavaScript
4
star
39

modularize-addin

RStudio addin to help modularize Shiny app code
R
4
star
40

useR2017

Analysis of useR2017 attendance information
R
3
star
41

bingo

Generate Bingo cards with R.
R
3
star
42

Rlist

Easy way to navigate and explore list structures in R (abandoned project)
R
2
star
43

dash2

R
2
star
44

shiny-training-rstudioconf-2018

R
2
star
45

presentations

A place for me to keep my presentations/papers/etc organized
2
star
46

pftv-ad-bypass-extension

Project Free TV shows an interstitial ad page before allowing users to continue to the video - this extension bypasses that page
JavaScript
2
star
47

attalitech

AttaliTech Ltd
CSS
1
star
48

shinywc

R
1
star
49

shiny-conf-nyr-2022

R
1
star
50

stat540-2014-attali-dean

Lab work for UBC STAT540
R
1
star
51

htmldependencybug

JavaScript
1
star
52

genes-track-demo

HTML
1
star