` react component instead of an HTML ``, we could simply change:
```r
content <- htmltools::tag("div", list(message))
```
to
```r
reactR::component("Sparklines", list(message))
```
Remember, though, that we'd like `` to consume a `data` property and also accept other valid components (e.g., ``, ``, etc) from this library as children. So, we could change the body and signature of `sparklines()` in the following way:
```{r}
sparklines <- function(data, ..., width = NULL, height = NULL) {
# describe a React component to send to the browser for rendering.
content <- reactR::component(
"Sparklines",
list(data = data, ...)
)
# create widget
htmlwidgets::createWidget(
name = 'sparklines',
reactR::reactMarkup(content),
width = width,
height = height,
package = 'sparklines'
)
}
```
At this point, we define functions that make it easy for the user to create the other components by adding these to `R/sparklines.R`
```{r}
#' @export
sparklinesLine <- function(...) {
reactR::React$SparklinesLine(...)
}
#' @export
sparklinesSpots <- function(...) {
reactR::React$SparklinesSpots(...)
}
```
### JavaScript changes
In order for the **reactR** toolchain to know how to render components from the 'react-sparklines' library, we need to register the React components on the JavaScript side. This can be done in the `srcjs/sparklines.js` file which currently looks like this:
```{js}
import { reactWidget } from 'reactR';
reactWidget('sparklines', 'output', {});
```
First, `reactWidget` is [imported](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) from the `'reactR'` JavaScript module. This function will register the React components we want within the **reactR** and **htmlwidgets** toolchain. Note that the `'reactR'` JavaScript is an html dependency, but webpack is configured in `webpack.config.js` to consider it a module, so it's available to us here via `import` syntax.
Then, there's a call to `reactWidget`, and we pass it three arguments:
1. The name of the widget (`'sparklines'`)
1. The type of the widget (`'output'`)
1. The React components that should be exposed to the widget. In this template, we didn't have to include any because it's just rendering an HTML div.
Instead of passing an empty object (`{}`) as the React components, we provide an object with all the components we need from the 'react-sparklines' module:
```{js}
import { Sparklines, SparklinesLine, SparklinesSpots } from 'react-sparklines';
import { reactWidget } from 'reactR';
reactWidget('sparklines', 'output', {
Sparklines: Sparklines,
SparklinesLine: SparklinesLine,
SparklinesSpots: SparklinesSpots
});
```
### Go for a spin
Now that we've made the necessary changes to the JavaScript and R source code, it's time to compile the JavaScript and install the R package:
```{r}
system("yarn install")
system("yarn run webpack")
devtools::document()
devtools::install()
library(sparklines)
sparklines(rnorm(10), sparklinesLine())
```
This should open up the `sparklines()` widget in your browser. If it does, congratulations, you created a React-based htmlwidget!
### Shiny integration
The scaffolding template already provides the glue you need to get your **reactR** widget to render in **Shiny**. The two relevant functions are `renderSparklines()` and `sparklinesOutput()`. You shouldn't need to modify these functions — they should work out of the box. You will, however, want to modify the example **Shiny** app in the `app.R` file:
```{r}
library(shiny)
library(sparklines)
ui <- fluidPage(
titlePanel("Sparklines library"),
sliderInput("n", label = "Number of samples", min = 2, max = 1000, value = 100),
sparklinesOutput("myWidget")
)
server <- function(input, output, session) {
output$myWidget <- renderSparklines({
sparklines(
rnorm(input$n),
sparklinesLine()
)
})
}
shinyApp(ui, server)
```
Now, when you run `shiny::runApp()`, you should see your react-based htmlwidget rendering in **shiny** app!
## Further learning
This tutorial walked you through the steps taken you create an R interface to the react-sparklines library. The full example package is accessible at . Our intention is keep creating example packages under the organization, so head there if you'd like to see other examples of interfacing with React.