reactRouter

CRAN status Grand total R-CMD-check LinkedIn

reactRouter brings React Router, the world’s most popular React routing library, to R and Shiny.

Why reactRouter?

reactRouter works with Shiny apps and Quarto documents — and also on its own. It extends whatever you are already building with new features:

Used alone, reactRouter brings the best of both worlds: the reactivity of Shiny (data that updates as users interact) and the simplicity of Quarto (multiple pages as static files, hostable anywhere, no server to maintain or pay for).

Usage

Create URL pages easily:

library(reactRouter)
library(htmltools)

ui <- RouterProvider(
  router = createHashRouter(
    Route(
      path = "/",
      element = div(
        NavLink(to = "/", "Main"), " | ",
        NavLink(to = "/analysis", "Analysis"), hr(),
        Outlet()
      ),
      Route(index = TRUE, element = "Main content"),
      Route(path = "analysis", element = "Analysis content")
    )
  )
)

# htmltools::save_html(ui, "index.html")
htmltools::browsable(ui)

Or use data loaders to fetch and display data client-side — no R server needed:

library(reactRouter)
library(htmltools)

# local or fetch an API
people_json <- jsonlite::toJSON(dplyr::starwars, dataframe = "rows", auto_unbox = TRUE)

ui <- RouterProvider(
  router = createHashRouter(
    Route(
      path = "/",
      element = div(
        NavLink(to = "/", "Home"), " | ",
        NavLink(to = "/people/1", "Luke"),
        hr(), Outlet()
      ),
      Route(index = TRUE, element = p("Try #/people/4 for Darth Vader.")),
      Route(
        path = "people/:id",
        loader = JS(sprintf("({ params }) => (%s)[params.id - 1]", people_json)),
        element = div(
          useLoaderData(tags$h3(), selector = "name"),
          useLoaderData(tags$p(),  selector = "homeworld")
        )
      )
    )
  )
)

# htmltools::save_html(ui, "index.html")
htmltools::browsable(ui)

Install

install.packages("reactRouter")
# remotes::install_github("lgnbhl/reactRouter") # development version

Resources

Acknowledgements

reactRouter is built on top of shiny.react, the R package by Appsilon that makes it possible to use React components in Shiny and Quarto.

Data loaders work seamlessly with any R package that uses shiny.react under the hood. This includes the MUI component ecosystem for R:

Learn more about how to use data loaders with these R packages here.

Contribute

Found a bug or have a feature request? Open an issue. Pull requests are welcome.

Follow Felix Luginbuhl on LinkedIn for updates.