React component builder.

Description

React is a syntactically-convenient way to create instances of React components that can be sent to the browser for display. It is a list for which extract methods are defined, allowing object creation syntax like React$MyComponent(x = 1) where MyComponent is a React component you have exposed to Shiny in JavaScript.

Usage

React

Format

An object of class react_component_builder of length 0.

Details

Internally, the component function is used to create the component instance.

Examples

# Create an instance of ParentComponent with two children,
# ChildComponent and OtherChildComponent.
React$ParentComponent(
  x = 1,
  y = 2,
  React$ChildComponent(),
  React$OtherChildComponent()
)

Transform Code with Babel

Description

Helper function to use V8 with Babel so we can avoid a JSX transformer with using reactR.

Usage

babel_transform(code = "")

Arguments

Value

transformed character

Examples

## Not run: 
library(reactR)
babel_transform('<div>react div</div>')

## End(Not run)

Create a React component

Description

Create a React component

Usage

component(name, varArgs = list())

Arguments

Value

An htmltools tag object

Examples

component("ParentComponent",
  list(
    x = 1,
    y = 2,
    component("ChildComponent"),
    component("OtherChildComponent")
  )
)

Create a React-based input

Description

Create a React-based input

Usage

createReactShinyInput(
  inputId,
  class,
  dependencies,
  default = NULL,
  configuration = list(),
  container = htmltools::tags$div
)

Arguments

Value

Shiny input suitable for inclusion in a UI.

Examples

myInput <- function(inputId, default = "") {
  # The value of createReactShinyInput should be returned from input constructor functions.
  createReactShinyInput(
    inputId,
    "myinput",
    # At least one htmlDependency must be provided -- the JavaScript implementation of the input.
    htmlDependency(
      name = "my-input",
      version = "1.0.0",
      src = "www/mypackage/myinput",
      package = "mypackage",
      script = "myinput.js"
    ),
    default
  )
}

Shim Dependency for React in RStudio Viewer

Description

Add this first for 'React' to work in RStudio Viewer.

Usage

html_dependency_corejs()

Value

htmlDependency

Dependencies for 'mobx'

Description

Add JavaScript 'mobx' and 'mobx-react' dependency. When using with 'react', the order of the dependencies is important, so please add html_dependency_react() before html_dependency_mobx().

Usage

html_dependency_mobx(react = TRUE)

Arguments

Value

htmlDependency

Examples

if(interactive()) {

library(htmltools)
library(reactR)

browsable(
  tagList(
    html_dependency_mobx(react = FALSE),
    div(id="test"),
    tags$script(HTML(
"
  var obs = mobx.observable({val: null})
  mobx.autorun(function() {
    document.querySelector('#test').innerText = obs.val
  })
  setInterval(
    function() {obs.val++},
    1000
  )
"
    ))
  )
)
}

## Not run: 
# use with react
library(htmltools)
library(reactR)

browsable(
  tagList(
    html_dependency_react(),
    html_dependency_mobx(),
    div(id="test"),
    tags$script(HTML(babel_transform(
"
  var obs = mobx.observable({val: null})
  var App = mobxReact.observer((props) => <div>{props.obs.val}</div>)

  ReactDOM.render(<App obs = {obs}/>, document.querySelector('#test'))

  setInterval(
    function() {obs.val++},
    1000
  )
"
    )))
  )
)

## End(Not run)

Dependencies for React

Description

Add JavaScript 'React' dependency. For this to work in RStudio Viewer, also include html_dependency_corejs.

Usage

html_dependency_react(offline = TRUE)

Arguments

Value

htmlDependency

Examples

library(reactR)
library(htmltools)

tagList(
  tags$script(
  "
    ReactDOM.render(
      React.createElement(
        'h1',
        null,
        'Powered by React'
      ),
      document.body
    )
  "
  ),
   #add core-js first to work in RStudio Viewer
  html_dependency_corejs(),
  html_dependency_react() #offline=FALSE for CDN
)

Adds window.reactR.exposeComponents and window.reactR.hydrate

Description

Adds window.reactR.exposeComponents and window.reactR.hydrate

Usage

html_dependency_reacttools()

Value

htmlDependency

Prepare data that represents a single-element character vector, a React component, or an htmltools tag for sending to the client.

Description

Tag lists as returned by htmltools tagList are not currently supported.

Usage

reactMarkup(tag)

Arguments

Value

A reactR markup object suitable for being passed to createWidget as widget instance data.

Create implementation scaffolding for a React.js-based Shiny input.

Description

Add the minimal code required to implement a React.js-based Shiny input to an R package.

Usage

scaffoldReactShinyInput(name, npmPkgs = NULL, edit = interactive())

Arguments

Note

This function must be executed from the root directory of the package you wish to add the input to.

Create implementation scaffolding for a React.js-based HTML widget

Description

Add the minimal code required to implement a React.js-based HTML widget to an R package.

Usage

scaffoldReactWidget(name, npmPkgs = NULL, edit = interactive())

Arguments

Note

This function must be executed from the root directory of the package you wish to add the widget to.