reactR reactR logo

CRAN_Status_Badge Travis-CI Build Status Slack Status

reactR provides a set of convenience functions for using React in R with htmlwidget constructor templates and local JavaScript dependencies. The React ecosystem is rich with components that can enhance R web and Shiny apps. scaffoldReactWidget() helps build htmlwidgets to integrate these React components as R htmlwidgets. scaffoldReactShinyInput() does the same for Shiny inputs. The local dependency functions are modeled after the html_dependency_* functions from RStudio’s rmarkdown package.

Installation

You can install reactR from CRAN with install.packages("reactR"). For the development version, please use devtools as shown below.

# install.packages("devtools")
devtools::install_github("react-R/reactR")

Creating htmlwidgets with React Components

To wrap a React component as an htmlwidget, please see the tutorial htmlwidgets with reactR. Also, there are a variety of examples in the react-R Github organization.

Shiny Outputs and Inputs

htmlwidgets built with reactR work well in Shiny as outputs. In version 0.4.0 Alan Dipert has added the ability to easily create React-based official Shiny inputs with helpers and scaffolds. Please see the tutorial for more details.

Examples

Below are examples of using reactR directly.

library(reactR)
library(htmltools)

browsable(tagList(
  tags$div(id = "app"),
  tags$script(
  "
    ReactDOM.render(
      React.createElement(
        'h1',
        null,
        'Powered by React'
      ),
      document.getElementById('app')
    )
  "
  ),
  #add core-js first to work in RStudio Viewer
  html_dependency_corejs(),
  html_dependency_react()
))

reactR uses the V8 package if available to transform JSX and ES2015 code with babel.

library(reactR)
library(htmltools)

browsable(
  tagList(
    tags$div(id = "app"),
    tags$script(
      babel_transform('ReactDOM.render(<h1>Powered By React/JSX</h1>,document.getElementById("app"))')
    ),
    # add core-js shim first for React in RStudio Viewer
    html_dependency_corejs(),
    html_dependency_react()
  )
)

Contributing and Code of Conduct

We welcome contributors and would love your participation. Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by the terms.