Home

The following functions are available. Click on a function name to view more.

function	arguments	description
add_css	elem, css	add a css class to an element
clear_inputs	elem, value	set input values to value = "" or a user defined value.
console_log	x, asDir=TRUE	log values to the browser console
hide_elem	elem, css	hides an element by adding a class by name or hidden
inner_html	elem, string, delay	write values to an element.
refresh_page	---	trigger a page refresh (history.go(0))
remove_css	elem, css	remove a css class from an element
remove_element	elem	remove an element from the DOM
set_element_attribute	elem, attr, value	update an attribute of an element
scroll_to_top	---	scroll to top of page
show_elem	elem, css	show an element by removing a class name or hidden
toggle_css	elem, css	toggle a css class

add_css

This function applies a class name to a specific element. This function uses querySelector to allow for id or class names. If using ids use, # + someid. Otherwise, use css = "some-classname". Since the function uses query selector, you can also use various selector path combinations.

library(shiny)

# ui
ui <- tagList(
    browsertools::use_browsertools(),
    tags$head(
        tags$style(
            ".large-blue-text {",
            "color: blue;",
            "font-size: 32pt;",
            "}"
        )
    ),
    tags$main(
        tags$h1("Hello world!"),
        tags$p(
            id = "txt",
            "Click the button below to add styling to this sentence."
        ),
        tags$button(
            id = "btn",
            class = "action-button shiny-bound-input",
            "Add Styling"
        )
    )
)

# server
server <- function(input, output, session) {
    observeEvent(input$btn, {
        browsertools::add_css(elem = "#txt", css = "large-blue-text")
    })
}

# app
shinyApp(ui, server)

clear_inputs

This function sets the value text-based inputs to "" (nothing) or to a value of your choice. Enter one or more elements.

clear_inputs(elem = "#username")

console_log

This function outputs a value to the browser's console. By default, the console method is dir this will expanded nested elements. Use FALSE if needed.

console_log(x = iris)

hide_elem

This function hides an element using a corresponding class name of hidden or by one of your choice (similar to remove_css) and sets the attribute hidden. The function is structured this way to allow you to hide elements using other css transformations and to allow for content that needs to be visually hidden. If you have content that you want to hide and it is purely visually, I would recommend using the following markup for the class hidden as opposed to display: none;

.hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

The JS function uses querySelector so you can enter an id or a class name.

# in r
hide_elem(elem = "#mydiv")

You can also tell the function to remove another css class using the css argument.

hide_elem(elem = "#mydiv", css = "my-custom-class")

See also show_elem.

inner_html

The function inner_html updates the content of an element. You can use either an id or class name. Use the delay attribute to add a pause before updating content. This is useful content rendered server-side. The delay argument is time in milliseconds.

inner_html(elem = "#mytitle", string = "Hello, world!", delay = 50)

refresh_page

When called in the server, this will refresh the application.

refresh_Page()

remove_css

This function removes a css class from an element by ID or classname

library(shiny)

# ui
ui <- tagList(
    browsertools::use_browsertools(),
    tags$head(
        tags$style(
            ".large-blue-text {",
            "color: blue;",
            "font-size: 32pt;",
            "}"
        )
    ),
    tags$main(
        tags$h1("Hello world!"),
        tags$p(
            id = "txt",
            class = "large-blue-text",
            "Click the button below to remove styling from the text."
        ),
        tags$button(
            id = "btn",
            class = "action-button shiny-bound-input",
            "Remove Text"
        )
    )
)

# server
server <- function(input, output, session) {
    observeEvent(input$btn, {
        browsertools::remove_css(elem = "#txt", css = "large-blue-text")
    })
}

# app
shinyApp(ui, server)

remove_element

Remove an element from the page using an ID or classname.

library(shiny)

# ui
ui <- tagList(
    browsertools::use_browsertools(),
    tags$main(
        tags$h1("Hello world!"),
        tags$p(
            id = "txt",
            "Click the button below to remove this text."
        ),
        tags$button(
            id = "btn",
            class = "action-button shiny-bound-input",
            "Remove Text"
        )
    )
)

# server
server <- function(input, output, session) {
    observeEvent(input$btn, {
        browsertools::remove_element(elem = "#txt")
    })
}

# app
shinyApp(ui, server)

scroll_to_top

This function resets the current view to the top of the page.

library(shiny)

# define a function that generates n paragraphs of lorem lipsum
lorem_lipsum <- function(n) {
    lorem <- stringi::stri_rand_lipsum(n)
    text <- list()
    lapply(seq_len(length(lorem)), function(index) {
        text[[index]] <<- shiny::tags$p(lorem[index])
    })
    return(shiny::tags$section(text))
}

# ui
ui <- tagList(
    browsertools::use_browsertools(),
    tags$main(
        tags$h1("scroll_to_top example"),
        lorem_lipsum(n = 20),
        tags$button(
            id = "btn",
            class = "action-button shiny-bound-input",
            "To top of page"
        )
    )
)

# server
server <- function(input, output, session) {
    observeEvent(input$btn, {
        browsertools::scroll_to_top()
    })
}

# app
shinyApp(ui, server)

show_elem

This function shows an element by id or class name. This function works be removing a class name hidden rather than modifying the display properties. In the css file assign a class name hidden associated with the element you want to show/hide. If you have content that you want to hide and it is purely visually, I would recommend using the following markup for the class hidden as opposed to display: none;

.hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

In R...

show_elem(elem = "#sidebar")

You can also specify another class to use.

show_elem(elem = "#sidebar", css = "my-class")

set_element_attribute

Use this function to modify any attribute of an element.

set_element_attribute(elem = "#sidebar", attr="data-value", value = "hello-world")

toggle_css

This function toggles a specific class of an element.

library(shiny)

# ui
ui <- tagList(
    browsertools::use_browsertools(),
    tags$head(
        tags$style(
            ".large-blue-text {",
            "color: blue;",
            "font-size: 32pt;",
            "}"
        )
    ),
    tags$main(
        tags$h1("toggle_css example"),
        tags$p(
            id = "txt",
            "Click the button below to toggle the text styling"
        ),
        tags$button(
            id = "btn",
            class = "action-button shiny-bound-input",
            "Toggle Styles"
        )
    )
)

# server
server <- function(input, output, session) {
    observeEvent(input$btn, {
        browsertools::toggle_css(elem = "#txt", css = "large-blue-text")
    })
}

# app
shinyApp(ui, server)