Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 6 days 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 (almost 10 years ago)
Default Branch: master
Last Pushed: 2024-08-18T18:40:38.000Z (4 months ago)
Last Synced: 2024-11-21T06:02:49.129Z (21 days ago)
Topics: javascript, r, r-package, rstats, shiny, shiny-r
Language: R
Homepage: https://deanattali.com/shinyjs
Size: 3.43 MB
Stars: 737
Watchers: 37
Forks: 118
Open Issues: 10
Metadata Files:
- Readme: README.md
- Changelog: NEWS.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

awesome-shiny-extensions - shinyjs - Perform common JavaScript operations in Shiny apps. (UI Components / Advanced Interactivity)
jimsghstars - daattali/shinyjs - 💡 Easily improve the user experience of your Shiny apps in seconds (R)

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

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

Ecosyste.ms: Awesome

https://github.com/daattali/shinyjs

Awesome Lists containing this project

README

shinyjs

💡 Easily improve the user experience of your Shiny apps in seconds Official website · by Dean Attali

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

Credits

💡 Easily improve the user experience of your Shiny apps in seconds

Official website
·
by Dean Attali