{"id":13440257,"url":"https://github.com/daattali/shinyjs","last_synced_at":"2025-05-15T04:07:52.806Z","repository":{"id":26394039,"uuid":"29843701","full_name":"daattali/shinyjs","owner":"daattali","description":"💡 Easily improve the user experience of your Shiny apps in seconds","archived":false,"fork":false,"pushed_at":"2025-04-12T02:08:34.000Z","size":3690,"stargazers_count":740,"open_issues_count":4,"forks_count":118,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-12T11:58:17.442Z","etag":null,"topics":["javascript","r","r-package","rstats","shiny","shiny-r"],"latest_commit_sha":null,"homepage":"https://deanattali.com/shinyjs","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daattali.png","metadata":{"files":{"readme":"README.md","changelog":"NEWS.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"daattali","patreon":"DeanAttali"}},"created_at":"2015-01-26T03:42:36.000Z","updated_at":"2025-04-12T02:06:06.000Z","dependencies_parsed_at":"2023-02-10T07:00:38.099Z","dependency_job_id":"defbccd9-1ed0-46e9-9f37-6b7f90eb5a50","html_url":"https://github.com/daattali/shinyjs","commit_stats":{"total_commits":556,"total_committers":12,"mean_commits":"46.333333333333336","dds":0.03956834532374098,"last_synced_commit":"0648faa0dc985a5be55bbc745fe042056a0ecfc3"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daattali%2Fshinyjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daattali%2Fshinyjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daattali%2Fshinyjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daattali%2Fshinyjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daattali","download_url":"https://codeload.github.com/daattali/shinyjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270656,"owners_count":22042860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","r","r-package","rstats","shiny","shiny-r"],"created_at":"2024-07-31T03:01:21.127Z","updated_at":"2025-05-15T04:07:47.771Z","avatar_url":"https://github.com/daattali.png","language":"R","readme":"\u003ch3 align=\"center\"\u003eshinyjs\u003c/h3\u003e\n\u003ch4 align=\"center\"\u003e\n  💡 Easily improve the user experience of your Shiny apps in seconds\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://deanattali.com/shinyjs/\"\u003eOfficial website\u003c/a\u003e\n  \u0026middot;\n  by \u003ca href=\"https://deanattali.com\"\u003eDean Attali\u003c/a\u003e\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/daattali/shinyjs/actions\"\u003e\n    \u003cimg src=\"https://github.com/daattali/shinyjs/workflows/R-CMD-check/badge.svg\" alt=\"R build status\" /\u003e\n  \u003c/a\u003e \n  \u003ca href=\"https://cran.r-project.org/package=shinyjs\"\u003e\n    \u003cimg src=\"https://www.r-pkg.org/badges/version/shinyjs\" alt=\"CRAN version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://paypal.me/daattali/20\"\u003e\n    \u003cimg src=\"https://i.imgur.com/vCIGFrH.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n\u003cimg src=\"inst/img/hex.png\" width=\"170\" align=\"right\"/\u003e\n\n{shinyjs} lets you perform common useful JavaScript operations in Shiny\napps that will greatly improve your apps without having to know any\nJavaScript.\n\nExamples include: hiding an element, disabling an input, resetting an\ninput back to its original value, delaying code execution by a few\nseconds, and many more useful functions for both the end user and the\ndeveloper. {shinyjs} can also be used to easily call your own custom\nJavaScript functions from R.\n\n**Need Shiny help? [I'm available for consulting](https://attalitech.com/).**\u003cbr/\u003e\n**If you find {shinyjs} useful, please consider [supporting my work](https://github.com/sponsors/daattali)! ❤**\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca style=\"display: inline-block;\" href=\"https://github.com/sponsors/daattali\"\u003e\n    \u003cimg height=\"35\" src=\"https://i.imgur.com/034B8vq.png\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e 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:\n\n| Package | Description | Demo |\n|---|---|---|\n| [shinyalert](https://github.com/daattali/shinyalert/) | 🗯️ Easily create pretty popup messages (modals) in Shiny | [🔗](https://daattali.com/shiny/shinyalert-demo/) |\n| [shinyscreenshot](https://github.com/daattali/shinyscreenshot/) | 📷 Capture screenshots of entire pages or parts of pages in Shiny apps | [🔗](https://daattali.com/shiny/shinyscreenshot-demo/) |\n| [timevis](https://github.com/daattali/timevis/) | 📅 Create interactive timeline visualizations in R | [🔗](https://daattali.com/shiny/timevis-demo/) |\n| [shinycssloaders](https://github.com/daattali/shinycssloaders/) | ⌛ Add loading animations to a Shiny output while it's recalculating | [🔗](https://daattali.com/shiny/shinycssloaders-demo/) |\n| [colourpicker](https://github.com/daattali/colourpicker/) | 🎨 A colour picker tool for Shiny and for selecting colours in plots | [🔗](https://daattali.com/shiny/colourInput/) |\n| [shinybrowser](https://github.com/daattali/shinybrowser/) | 🌐 Find out information about a user's web browser in Shiny apps | [🔗](https://daattali.com/shiny/shinybrowser-demo/) |\n| [shinydisconnect](https://github.com/daattali/shinydisconnect/) | 🔌 Show a nice message when a Shiny app disconnects or errors | [🔗](https://daattali.com/shiny/shinydisconnect-demo/) |\n| [shinytip](https://github.com/daattali/shinytip/) | 💬 Simple flexible tooltips for Shiny apps | WIP |\n| [shinymixpanel](https://github.com/daattali/shinymixpanel/) | 🔍 Track user interactions with Mixpanel in Shiny apps or R scripts | WIP |\n| [shinyforms](https://github.com/daattali/shinyforms/) | 📝 Easily create questionnaire-type forms with Shiny | WIP |\n\n# Table of contents\n\n-   [Demos and tutorials](#demos)\n-   [Sponsors 🏆](#sponsors)\n-   [Overview of main functions](#overview-main)\n-   [Installation](#install)\n-   [How to use](#usage)\n-   [Basic use case - complete working example](#usecase)\n-   [Calling your own JavaScript functions from R](#extendshinyjs)\n-   [FAQ and extra tricks](#faq-tricks)\n-   [Support](#support)\n\n\u003ch2 id=\"demos\"\u003e\nDemos and tutorials\n\u003c/h2\u003e\n\n-   [Demo Shiny app](https://deanattali.com/shinyjs/demo) that lets you\n    play around with some of the functionality in {shinyjs}.\n-   [Video of my {shinyjs}\n    talk](https://deanattali.com/shinyjs-shinydevcon-2016/) (30 min) and\n    the corresponding [presentation\n    slides](https://docs.google.com/presentation/d/1XyBrIA97ZWIkm8NICAyWHo4J9hj_i2-mJmKEq_CR2A8/edit?usp=sharing)\n    from the 2016 Shiny Developer Conference.\n-   [Video of my {shinyjs}\n    talk](https://deanattali.com/shinyjs-user-2016/) (5 min) and the\n    corresponding [presentation\n    slides](https://docs.google.com/presentation/d/1owJpLTmfV-53Ca9NJIweBMANsmjaErKXNzw_sCTuBAw/edit?usp=sharing)\n    from the 2016 useR Conference.\n\n\u003ch2 id=\"sponsors\"\u003e\nSponsors 🏆\n\u003c/h2\u003e\n\n\u003e There are no sponsors yet\n\n[Become the first sponsor for {shinyjs} and unlock special\nrewards!](https://github.com/sponsors/daattali/sponsorships?tier_id=39856)\n\n\u003ch2 id=\"overview-main\"\u003e\nOverview of main functions\n\u003c/h2\u003e\n\n**Note: In order to use any {shinyjs} function in a Shiny app, you must\nfirst call `useShinyjs()` anywhere in the app’s UI.**\n\n\u003ctable\u003e\n\u003ccolgroup\u003e\n\u003ccol style=\"width: 28%\" /\u003e\n\u003ccol style=\"width: 71%\" /\u003e\n\u003c/colgroup\u003e\n\u003cthead\u003e\n\u003ctr class=\"header\"\u003e\n\u003cth\u003eFunction\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003eshow\u003c/code\u003e/\u003ccode\u003ehide\u003c/code\u003e/\u003ccode\u003etoggle\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eDisplay or hide an element (optionally with an animation).\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003ehidden\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eInitialize a Shiny tag as invisible (can be shown later with a call to \u003ccode\u003eshow\u003c/code\u003e).\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003eenable\u003c/code\u003e/\u003ccode\u003edisable\u003c/code\u003e/\u003ccode\u003etoggleState\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eEnable or disable an input element, such as a button or a text input.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003edisabled\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eInitialize a Shiny input as disabled.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003ereset\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eReset a Shiny input widget back to its original value.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003erefresh\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eRefresh the page.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003edelay\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eExecute R code (including any {shinyjs} functions) after a specified amount of time.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003ealert\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eShow a message to the user.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003eclick\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSimulate a click on a button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003ehtml\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eChange the text/HTML of an element.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003eonclick\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eRun 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.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003eonevent\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSimilar to \u003ccode\u003eonclick\u003c/code\u003e, but can be used with many other events instead of click (for example, listen for a key press, mouse hover, etc).\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003eremoveEvent\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eRemove an event that was added to an HTML element with \u003ccode\u003eonclick()\u003c/code\u003e or \u003ccode\u003eonevent()\u003c/code\u003e.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003eaddClass\u003c/code\u003e/\u003ccode\u003eremoveClass\u003c/code\u003e/\u003ccode\u003etoggleClass\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eadd or remove a CSS class from an element.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003erunjs\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eRun arbitrary JavaScript code.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003eextendShinyjs\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eAllows 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.\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n### Functions that help you during Shiny app development\n\n\u003ctable\u003e\n\u003ccolgroup\u003e\n\u003ccol style=\"width: 28%\" /\u003e\n\u003ccol style=\"width: 71%\" /\u003e\n\u003c/colgroup\u003e\n\u003cthead\u003e\n\u003ctr class=\"header\"\u003e\n\u003cth\u003eFunction\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003eruncode\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eAdds a text input to your app that lets you run arbitrary R code live.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003eshowLog\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ePrint any JavaScript \u003ccode\u003econsole.log()\u003c/code\u003e messages in the R console, to make it easier and quicker to debug apps without having to open the JS console.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"odd\"\u003e\n\u003ctd\u003e\u003ccode\u003elogjs\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003ePrint a message to the JavaScript console (mainly used for debugging purposes).\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr class=\"even\"\u003e\n\u003ctd\u003e\u003ccode\u003einlineCSS\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eEasily add inline CSS to a Shiny app.\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n[Check out the {shinyjs} demo app](https://deanattali.com/shinyjs/demo)\nto see some of these in action, or install {shinyjs} and run\n`shinyjs::runExample()` to see more demos.\n\n\u003ch2 id=\"install\"\u003e\nInstallation\n\u003c/h2\u003e\n\n**For most users:** To install the stable CRAN version:\n\n```r\ninstall.packages(\"shinyjs\")\n```\n\n**For advanced users:** To install the latest development version from GitHub:\n\n```r\ninstall.packages(\"remotes\")\nremotes::install_github(\"daattali/shinyjs\")\n```\n\n\u003ch2 id=\"usage\"\u003e\nHow to use\n\u003c/h2\u003e\n\nA typical Shiny app has a UI portion and a server portion. Before using\nmost {shinyjs} functions, you need to call `useShinyjs()` in the app’s\nUI. It’s best to include it near the top as a convention.\n\nHere is a minimal Shiny app that uses {shinyjs}:\n\n    library(shiny)\n    library(shinyjs)\n\n    ui \u003c- fluidPage(\n      useShinyjs(),  # Include shinyjs\n\n      actionButton(\"button\", \"Click me\"),\n      textInput(\"text\", \"Text\")\n    )\n\n    server \u003c- function(input, output) {\n      observeEvent(input$button, {\n        toggle(\"text\")  # toggle is a shinyjs function\n      })\n    }\n\n    shinyApp(ui, server)\n\nThis is how most Shiny apps should initialize {shinyjs} - by calling\n`useShinyjs()` near the top of the UI.\n\nHowever, if you use {shinyjs} in any of the following cases:\n\n-   In Shiny dashboards (built using the `shinydashboard` package)\n-   In Shiny apps that use a `navbarPage` layout\n-   In Rmd documents\n-   In Shiny apps that manually build the user interface with an HTML\n    file or template (instead of using Shiny’s UI functions)\n\nThen you should see the [*Including {shinyjs} in different types of\napps*](https://deanattali.com/shinyjs/advanced) document.\n\nIf your Shiny app doesn’t fall into any of these categories, then the\nabove code sample should be enough to get your started with including\n{shinyjs} in your app.\n\n\u003ch2 id=\"usecase\"\u003e\nBasic use case - complete working example\n\u003c/h2\u003e\n\nSee the [*{shinyjs} example app\nwalk-through*](https://deanattali.com/shinyjs/example) document for a\nstep-by-step guide on how to add a variety of {shinyjs} features to a\nsimple app in order to make it more user friendly.\n\n\u003ch2 id=\"extendshinyjs\"\u003e\nCalling your own JavaScript functions from R\n\u003c/h2\u003e\n\nYou can also use {shinyjs} to add your own JavaScript functions that can\nbe called from R as if they were regular R functions using\n`extendShinyjs()`. This is only suitable for advanced users who are\nfamiliar with JavaScript and wish to facilitate the communication\nbetween R and JavaScript.\n\nTo learn about this feature and see how useful it can be, see the\n[*extendShinyjs: Calling your own JavaScript functions from\nR*](https://deanattali.com/shinyjs/extend) document.\n\n\u003ch2 id=\"faq-tricks\"\u003e\nFAQ and extra tricks\n\u003c/h2\u003e\n\nThere are several questions that pop up very frequently in my email or\non StackOverflow about “How do I use {shinyjs} to do \\_\\_\\_?” Here is a\nlist of a few of these common questions with links to a solution that\ncould be useful. Note that all of these require using `extendShinyjs()`.\n\n-   [How do I show/hide the `shinydashboard` sidebar\n    programmatically?](https://stackoverflow.com/a/31306707/3943160)\n-   [How do I hide/disable a\n    tab?](https://stackoverflow.com/a/31719425/3943160)\n-   [How do I refresh the\n    page?](https://stackoverflow.com/a/34758024/3943160)\n-   [How do I call a JavaScript function from a different JavaScript\n    library?](https://github.com/timelyportfolio/sweetalertR/issues/1#issuecomment-151685005)\n-   [How do I change the values of a\n    `sliderInput`?](https://stackoverflow.com/a/31066997/3943160)\n-   [How do I call JavaScript code and use the return\n    value?](https://stackoverflow.com/a/34728125/3943160)\n\nI also keep a long [list of various Shiny tips \u0026\ntricks](https://deanattali.com/blog/advanced-shiny-tips/) for solving\ncommon Shiny problems, many of which make use of {shinyjs}.\n\n\u003ch2 id=\"support\"\u003e\nSupport\n\u003c/h2\u003e\n\nThis document is only an overview of {shinyjs}. There are more in-depth\nresources available on the [{shinyjs}\nwebsite](https://deanattali.com/shinyjs/).\n\nIf you need help with {shinyjs}, free support is available on\n[StackOverflow](https://stackoverflow.com/questions/ask?tags=r+shiny+shinyjs),\n[RStudio\nCommunity](https://community.rstudio.com/new-topic?category=shiny\u0026tags=shinyjs),\nand [Twitter](https://twitter.com/hashtag/rstats).\n\n**Due to the large volume of requests I receive, I’m unable to provide\nfree support. If you can’t solve an issue and require paid help,\nplease [contact\nme](https://attalitech.com/contact).**\n\n\u003ch2\u003e\nCredits\n\u003c/h2\u003e\n\nLogo design by [Alfredo Hernández](https://aldomann.com/).\n\n","funding_links":["https://github.com/sponsors/daattali","https://patreon.com/DeanAttali","https://paypal.me/daattali/20","https://github.com/sponsors/daattali)!","https://github.com/sponsors/daattali/sponsorships?tier_id=39856"],"categories":["R","Web Technologies and Services","Tools","UI Components"],"sub_categories":["Packages","Advanced Interactivity"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaattali%2Fshinyjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaattali%2Fshinyjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaattali%2Fshinyjs/lists"}