Adding custom JavaScript is a great way to give your Shiny application that extra spark. Whether you’re looking to build custom UI components, change the appearance of elements, add animations or leverage external JavaScript libraries: you can do it all! There is a variety of JavaScript methods and events available that help you achieve all of it, and Shiny comes with built-in JavaScript events and functions too. If you want to have everything in one overview, this JavaScript for Shiny cheatsheet is for you.
Adding JavaScript to Shiny
Under the hood, Shiny uses JavaScript (or, to be more specific, TypeScript) to provide you with all the functions to easily write interactive web applications with R. No JavaScript, HTML or CSS needed. And if Shiny doesn’t have what you’re looking for, you can use any of the extra packages available! Of course, you can just stick to those packages and R functions, but at some point you want to do things that require a bit of custom JavaScript.
Luckily, you can easily add your own JavaScript files or snippets to your Shiny application. How? Check out the JavaScript for Shiny beginner’s guide!
Events, methods and the Shiny object
How convenient would it be if you can have all JavaScript methods and events that are common in Shiny in one overview? Well, hello JavaScript for Shiny cheatsheet!
This ultimate cheatsheet covers:
Common JavaScript methods (with vanilla JS and jQuery examples): JavaScript methods are functions built into JavaScript objects. Vanilla JS methods work directly with the browser’s JavaScript, while jQuery provides shorthand methods to simplify common tasks, like DOM manipulation or event handling.
JavaScript events: These are actions that occur in the browser, such as clicks, mouse movements, or keyboard presses. Events can trigger JavaScript functions, allowing your app to respond to user interaction. This list is extensive, and the JavaScript for Shiny cheatsheet only covers a subset of them. For a full list, you can check out W3Schools.
The Shiny Object: Shiny exposes an object that can be used in JavaScript. This object allows you to interact with Shiny from JavaScript. Think about setting input values and receiving messages from R.
Shiny events: Shiny keeps you informed about what it’s doing by firing certain events. You can listen for these events in JavaScript, and use them to trigger behaviour at appropriate times.
Ultimate JavaScript for Shiny cheatsheet
Save it to your desktop or print it and put it on your wall- the choice is yours! You can send an email if you want a PDF version.
And of course, don’t forget to share with your fellow Shiny devs!