R, Python, and JavaScript · one version

bslibreact

bslib's own markup, class for class, as React components.

bslibreact is a component kit for shinyreact's ui.tsx pattern, where an R or Python Shiny server does the reactive work and a React client owns the page. Each component reproduces the HTML that one bslib or Shiny call renders, and its tests compare against what the installed bslib emits, so a ported app looks like the bslib original.

R docs → Python docs → JavaScript docs → GitHub →

Three packages

A server package and a client package

The React components ship in the npm package. The R and Python packages are the server half: they attach the CSS and JavaScript a bslib page would, and host Shiny's own widgets inside the React page.

The R package

page_deps(), host_input() and bslibreact_dep() for a Shiny server in R. Function reference and changelog, built with pkgdown.

pak::pak("samuelbharti/bslibreact/pkg-r")

R docs →

Python

The Python package

The same three helpers for a Shiny server in Python. API reference, built with quartodoc.

pip install bslibreact

Python docs →

JavaScript

The JavaScript package

The React components: page shells, cards, sidebars, navbars, inputs and outputs. API reference from the TypeScript types, with the README as the guide.

npm install bslibreact

JavaScript docs →

How it fits together

A Shiny server, a React client

The server hosts a real Shiny slider and renders a plot. The client lays out the page with bslib's sidebar markup and shows both.

Server · R

library(shiny)
library(bslib)
library(shinyreact)
library(bslibreact)

app_theme <- bs_theme(version = 5)
ui <- page_react(
  page_deps(app_theme),
  title = "Demo",
  theme = app_theme
)

server <- function(input, output, session) {
  host_input(output, "bins",
    sliderInput("bins", "Bins", 1, 50, 30))
  output$plot <- renderPlot(
    hist(rnorm(500), breaks = req(input$bins)))
}

shinyApp(ui, server)

Client · src/App.tsx

import {
  PageSidebar,
  SliderInput,
  PlotOutput,
} from "bslibreact";

export default function App() {
  return (
    <PageSidebar
      title="Demo"
      sidebar={<SliderInput id="bins_ui" />}
    >
      <PlotOutput id="plot" />
    </PageSidebar>
  );
}

Examples