| Title: | Tools for Using React in Shiny |
|---|---|
| Description: | A toolbox for defining React component wrappers which can be used seamlessly in Shiny apps. |
| Authors: | Jakub Sobolewski [aut, cre], Kamil Żyła [aut], Marek Rogala [aut], Appsilon Sp. z o.o. [cph] |
| Maintainer: | Jakub Sobolewski <[email protected]> |
| License: | LGPL (>= 3) |
| Version: | 0.4.0 |
| Built: | 2026-05-10 08:31:05 UTC |
| Source: | https://github.com/appsilon/shiny.react |
Converts arguments to a list which can be passed as the props argument to reactElement().
Unnamed arguments become children and named arguments become attributes for the element.
asProps(...)asProps(...)
... |
Arguments to prepare for passing as props to a 'React' component |
A list of the arguments structured suitably for reactElement().
Sets the shiny.react_DEBUG option to TRUE. In debug mode, 'shiny.react' will load a dev
version of 'React', which is useful for debugging. It will also set the logging level to DEBUG.
Call this function before running the app to enable the debugging mode.
enableReactDebugMode()enableReactDebugMode()
Nothing. This function is called for its side effects.
Copied verbatim from the htmlwidgets package to avoid adding a dependency just for this single function.
JS(...)JS(...)
... |
Character vectors as the JavaScript source code (all arguments will be pasted into one character string). |
The input character vector marked with a special class.
Render children with React.
ReactContext(...)ReactContext(...)
... |
Children to render. |
if (interactive()) shinyApp( ui = shiny.react:::ReactContext( "This text is rendered by React" ), server = function(input, output) {} )if (interactive()) shinyApp( ui = shiny.react:::ReactContext( "This text is rendered by React" ), server = function(input, output) {} )
'React' library dependency
reactDependency(useCdn = FALSE)reactDependency(useCdn = FALSE)
useCdn |
If |
An htmlDependency object which can be used to attach the 'React' library.
Creates a shiny.tag which can be rendered just like other 'Shiny' tags as well as passed in
props to other 'React' elements. Typically returned from a wrapper ("component") function,
which parses its arguments with asProps() and fills in the other arguments.
reactElement(module, name, props, deps = NULL)reactElement(module, name, props, deps = NULL)
module |
JavaScript module to import the component from. |
name |
Name of the component. |
props |
Props to pass to the component. |
deps |
HTML dependencies to attach. |
A shiny.tag object representing the 'React' element.
Component <- function(...) reactElement( module = "@/module", name = "Component", props = asProps(...) )Component <- function(...) reactElement( module = "@/module", name = "Component", props = asProps(...) )
Creates a 'Shiny' output which can be used analogously to shiny::uiOutput() but preserves
'React' state on re-renders.
reactOutput(outputId)reactOutput(outputId)
outputId |
Id that can be used to render React on the server |
A shiny.tag object which can be placed in the UI.
# This example uses some unexported test components. The components are not exported, # as shiny.react is designed to only provide the machinery for building React-based packages. # See shiny.fluent for a large number of examples. if (interactive()) { colors <- list("Gold", "Lavender", "Salmon") shinyApp( ui = bootstrapPage( reactOutput("ui"), selectInput("color", label = "Background color", choices = colors) ), server = function(input, output) { output$ui <- renderReact( shiny.react:::Box( style = list(backgroundColor = input$color), shiny.react:::Pinger() ) ) } ) }# This example uses some unexported test components. The components are not exported, # as shiny.react is designed to only provide the machinery for building React-based packages. # See shiny.fluent for a large number of examples. if (interactive()) { colors <- list("Gold", "Lavender", "Salmon") shinyApp( ui = bootstrapPage( reactOutput("ui"), selectInput("color", label = "Background color", choices = colors) ), server = function(input, output) { output$ui <- renderReact( shiny.react:::Box( style = list(backgroundColor = input$color), shiny.react:::Pinger() ) ) } ) }
Renders HTML and/or 'React' in outputs created with reactOutput() (analogously to
shiny::renderUI()).
renderReact(expr, env = parent.frame(), quoted = FALSE)renderReact(expr, env = parent.frame(), quoted = FALSE)
expr |
Expression returning the HTML / 'React' to render. |
env |
Environment in which to evaluate expr. |
quoted |
Is |
A function which can be assigned to an output in a Shiny server function.
Creates a handler which can be used for onChange and similar
props of 'React' components to set the value of a 'Shiny' input to one of
the arguments passed to the handler.
setInput(inputId, jsAccessor) ## S4 method for signature 'character,missing' setInput(inputId) ## S4 method for signature 'character,numeric' setInput(inputId, jsAccessor) ## S4 method for signature 'character,character' setInput(inputId, jsAccessor)setInput(inputId, jsAccessor) ## S4 method for signature 'character,missing' setInput(inputId) ## S4 method for signature 'character,numeric' setInput(inputId, jsAccessor) ## S4 method for signature 'character,character' setInput(inputId, jsAccessor)
inputId |
'Shiny' input ID to set the value on. |
jsAccessor |
Index (numeric 0-based index) or accessor (JavaScript string) of the argument to use as value. |
The argument jsAccessor can be empty (assumes jsAccessor = 0) or
take one of the following types:
A valid JavaScript accessor string to be applied to the object
(example: jsAccessor = "[0].target.checked").
A valid JavaScript 0-based index.
As an example, calling setInput("some_index", 1) is equivalent to
setInput("some_index", "[1]")
A ReactData object which can be passed as a prop to 'React'
components.
setInput(inputId = character, jsAccessor = missing): Uses as index jsAccessor = 0
setInput(inputId = character, jsAccessor = numeric): Gets the value via index (see examples).
setInput(inputId = character, jsAccessor = character): Gets value via accessor (see examples).
# Same as `setInput("some_id", 0)`. setInput("some_id") # Equivalent to `(...args) => Shiny.setInputValue('some_id', args[1])` in JS. setInput("some_id", 1) # Same as `setInput("some_id", 1)`. setInput("some_id", "[1]") # Equivalent to `(...args) => Shiny.setInputValue('some_id', args[0].target.value)` in JS. setInput("some_id", "[0].target.value")# Same as `setInput("some_id", 0)`. setInput("some_id") # Equivalent to `(...args) => Shiny.setInputValue('some_id', args[1])` in JS. setInput("some_id", 1) # Same as `setInput("some_id", 1)`. setInput("some_id", "[1]") # Equivalent to `(...args) => Shiny.setInputValue('some_id', args[0].target.value)` in JS. setInput("some_id", "[0].target.value")
'shiny.react' JavaScript dependency
shinyReactDependency()shinyReactDependency()
An htmlDependency object which can be used attach the JavaScript code
required by 'shiny.react'.
Creates a handler which can be used for onClick and similar props of 'React' components
to trigger an event in 'Shiny'.
triggerEvent(inputId)triggerEvent(inputId)
inputId |
'Shiny' input ID to trigger the event on. |
A ReactData object which can be passed as a prop to 'React' components.
Updates inputs created with the help of InputAdapter function (part of the JavaScript
interface). Analogous to shiny::updateX() family of functions, but generic.
updateReactInput(session = shiny::getDefaultReactiveDomain(), inputId, ...)updateReactInput(session = shiny::getDefaultReactiveDomain(), inputId, ...)
session |
Session object passed to function given to shinyServer. |
inputId |
Id of the input object. |
... |
Props to modify. |
If you're creating a wrapper package for a 'React' library, you'll probably want to provide a dedicated update function for each input to imitate 'Shiny' interface.
Nothing. This function is called for its side effects.