reactR icon indicating copy to clipboard operation
reactR copied to clipboard

use reactR shiny inputs without a package

Open timelyportfolio opened this issue 5 months ago • 0 comments

Just hacking around here, and I wondered if anyone would have interest in seeing how we might use reactR with Shiny inputs not housed in a package. Here is an ugly quick example:

library(shiny)
library(reactR)

ui <- tagList(
  tags$script(HTML(
"
  const CounterInput = ({ configuration, value, setValue }) => {
    return React.createElement(
      'div',
      configuration,
      // bad idea since not accessible, but add some span to decrement/increment counter
      [
        React.createElement('span',{style: {backgroundColor: 'red'}, onClick: (evt) => {setValue(value - 1)}},'-'),
        value,
        React.createElement('span',{style: {backgroundColor: 'green'},onClick: (evt) => {setValue(value + 1)}},'+')
      ]
    )
  };
  reactR.reactShinyInput('.counter', 'counter', CounterInput); 
"    
  )),
  createReactShinyInput(
    inputId = "testcounter",
    class = "counter",
    dependencies = list(list()), # fake dependency since we will define in script
    configuration = list(),
    default = 0
  )
)

server <- function(input, output, session) {
  # # if we wanted to make a counter we could uncomment below
  # observe({
  #   invalidateLater(1000, session)
  #   session$sendInputMessage(
  #     'testcounter',
  #     list(
  #       value = isolate(input$testcounter) + 1,
  #       # for fun make the font size bigger as we count up
  #       configuration = list(style = list(fontSize = paste0(isolate(input$testcounter) + 1, "em")))
  #     )
  #   )
  # })
}

shinyApp(ui, server)

timelyportfolio avatar Jul 25 '25 01:07 timelyportfolio