extendShinyjs: Extend shinyjs with your own JavaScript functions

Description

Add your own JavaScript functions that can be called from R as if they were regular R functions. This is a more advanced technique and can only be used if you know JavaScript. See 'Basic Usage' below for more information or https://github.com/daattali/shinyjs{view the full README} to learn more.

Usage

extendShinyjs(script, text)

Value

Scripts that shinyjs requires in order to run your JavaScript functions as if they were R code.

Basic Usage

Any JavaScript function defined in your script that begins with `shinyjs.` will be available to run from R through the `js$` variable. For example, if you write a JavaScript function called `shinyjs.myfunc`, then you can call it in R with `js$myfunc()`. It's recommended to write JavaScript code in a separate file and provide the filename as the `script` argument, but it's also possible to use the `text` argument to provide a string containing valid JavaScript code. Using the `text` argument is meant to be used when your JavaScript code is very short and simple. As a simple example, here are the steps required to add a JavaScript function that shows a message to the user (similar to info):

Create a JavaScript file inside the Shiny app's directorywww/js/shinyjs-ext.js
Add the following JavaScript function to the file:shinyjs.myfunc = function(params) { alert(params); }
In your Shiny app's UI, add a call toshinyjs::extendShinyjs("www/js/shinyjs-ext.js")
Alternatively, instead of the previous three steps you can provide the JavaScript code inline since it's fairly short:shinyjs::extendShinyjs(text = "shinyjs.myfunc = function(params) { alert(params); }")
Now in your Shiny app's server you can calljs$myfunc("Hello!")and you will get a JavaScript message.

You can add more functions to the JavaScript file, but remember that every function you want to use within R has to have a name beginning with `shinyjs.`. See the section on passing arguments or the examples below to see a more realistic example of how to implement a function with arguments.

Passing arguments from R to JavaScript

shinyjs will pass a single array-like parameter to your JavaScript function. If the function in R was called with unnamed arguments, then it will pass an Array of the arguments; if the R arguments are named then it will pass an Object with key-value pairs (each key is an argument name and the value is the argument's value). To assist with normalizing the parameters, you can call the shinyjs.getParams(params, defaults) function:

paramsare the parameters that are passed to your JavaScript function
defaultsis an Object with key-value pairs of parameters, where each key is a parameter name and each value is a default value.

The order of the parameters in this defaults object should match the order of the parameters that users should use if they choose not to use named arguments. For example, if a JavaScript function expects an id parameter and a length parameter (in that order), then these could be the first few lines of the function: shinyjs.myfunc(params) { var defaultParams = { id : null, length : 5 }; params = shinyjs.getParams(params, defaultParams); // function body } This function could be called either with js$myfunc('test') or js$myfunc('test', 10) or js$myfunc(length = 10, id = 'test')

Examples

Run this code

Example 1:
  Change the page background to a certain colour when a button is clicked.
  This example uses the `text` argument to provide short JavaScript code inline.

      library(shiny)
      runApp(shinyApp(
        ui = fluidPage(
          useShinyjs(),
          extendShinyjs(text =
            "shinyjs.pageCol = function(params){$('body').css('background', params);}"),
          actionButton("btn", "Click me")
        ),
        server = function(input, output, session) {
          observeEvent(input$btn, {
            js$pageCol("red")
          })
        }
      ))

  ==============

  Example 2:
  Create an `increment` function that increments the number inside an HTML
  tag (increment by 1 by default, with an optional parameter).

  Create a JavaScript file "myfuncs.js":
    shinyjs.increment = function(params) {
      var defaultParams = {
        id : null,
        num : 1
      };
      params = shinyjs.getParams(params, defaultParams);

      var el = $("#" + params.id);
      el.text(parseInt(el.text()) + params.num);
    }

    And a shiny app that uses the custom function we just defined. Note how
    the arguments can be either passed as named or unnamed, and how default
    values are set if no value is given to a parameter.

      library(shiny)
      runApp(shinyApp(
        ui = fluidPage(
          useShinyjs(),
          extendShinyjs("myfuncs.js"),
          p(id = "number", 0),
          actionButton("add", "js$increment('number')"),
          actionButton("add5", "js$increment('number', 5)"),
          actionButton("add10", "js$increment(num = 10, id = 'number')")
        ),
        server = function(input,output,session) {
          observeEvent(input$add, {
            js$increment('number')
          })
          observeEvent(input$add5, {
            js$increment('number', 5)
          })
          observeEvent(input$add10, {
            js$increment(num = 10, id = 'number')
          })
        }
      ))