Shiny comes with a large library of input widgets for collecting input from the user and conveying input data to R.
reactR provides additional tools to ease the creation of new Shiny inputs implemented using React. In the following tutorial, we will demonstrate these tools by implementing a new Shiny color picker input that wraps the react-color library.
In order to develop a reactR Shiny input, you’ll need to install R and optionally RStudio. If you’re on Windows, you should also install Rtools.
For an excellent general introduction to R package concepts, check out the R packages online book.
To follow along in this vignette, you’ll also need the following R packages:
To create a new widget you can call
scaffoldReactShinyInput to generate the basic structure and
build configuration. This function will:
version elements. For example, the npm package
foo at version
^1.2.0 would be expressed as
list(name = "foo", version = "^1.2.0"). The package, if
provided, will be added to the new widget’s
a build dependency.
The following R code will create an R package named
colorpicker, then provide the templating for creating
an input powered by the
react-color library on npm:
# Create the R package (rstudio=TRUE is recommended if you're not already comfortable with your terminal)
usethis::create_package("~/colorpicker", rstudio = TRUE)
# Scaffold initial input implementation files
reactR::scaffoldReactShinyInput("colorpicker", list("react-color" = "^2.17.0"), edit = FALSE)
The next step is to navigate to the newly-created
colorpicker project and run the following commands in the
terminal. If you’re new the terminal, we recommend opening your newly
file, then running the following in the RStudio terminal tab:
yarn run webpack
yarn install downloads all of the dependencies
package.json and creates a new file,
yarn.lock. You should add this file to revision control. It
will be updated whenever you change dependencies and run
yarn install. Note: you only need to run it after
modifying package.json. For further documentation on
yarn install, see the yarn
source file at
www/colorpicker/colorpicker/colorpicker.js. The latter file
is the one actually used by the R package and includes all the relevant
yarn run webpack is not strictly a
command. In fact,
yarn run simply delegates to the webpack program. Webpack’s
configuration is generated by
webpack.config.js, but you can always change this
configuration and/or modify the
yarn run webpack command to
suit your needs.
In RStudio, you can use the keyboard shortcuts
Ctrl-Shift-B to document and
build the package. (On macOS, the shortcuts are
app.R to see a demo in action:
In RStudio, you can open
app.R and press
Cmd-Shift-Enter on macOS).
You should see something like the following appear in the Viewer
This tutorial walked you through the steps taken to wrap the
react-color library in a Shiny input. The full example
package is accessible at https://github.com/react-R/colorpicker-example. Our
intention is keep creating example packages under the https://github.com/react-R organization, so head there
if you’d like to see other examples of interfacing with React.