Skip to content

README.md

Latest commit

 

History

History
117 lines (92 loc) · 2.99 KB

README.md

File metadata and controls

117 lines (92 loc) · 2.99 KB

n# dsreactwidgets

React-based widgets for Shiny applications.

Installation

# Install from GitHub (compiled files are included in the repository)
devtools::install_github("yourusername/dsreactwidgets")

The package includes pre-compiled JavaScript files, so you can install and use it directly without building.

Building the React Components (For Developers)

If you're developing the package or making changes to the React components, you need to build them:

# Install Node.js dependencies
npm install

# Build the React components
npm run build

For development with watch mode:

npm run dev

Note: The compiled files in inst/lib/ are included in the repository to ensure GitHub installations work correctly.

Usage

Side Panel Widget

The sidePanelInput widget provides a side panel with a menu and dynamic content:

library(shiny)
library(dsreactwidgets)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      #main-content {
        padding: 20px;
        transition: margin-left 0.3s ease;
      }
    "))
  ),
  sidePanelInput(
    "side_panel",
    menuItems = list(
      list(
        id = "home",
        icon = "<svg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path></svg>",
        title = "Home",
        tooltip = "Go to home",
        body = div(
          h3("Home Content"),
          p("This is the home section")
        )
      ),
      list(
        id = "settings",
        icon = "<svg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor'><circle cx='12' cy='12' r='3'></circle><path d='M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24'></path></svg>",
        title = "Settings",
        tooltip = "Settings",
        body = div(
          h3("Settings"),
          selectInput("setting1", "Setting 1", c("A", "B", "C"))
        )
      )
    ),
    mainContentId = "main-content",
    buttonText = "Edit",
    initialOpen = TRUE
  ),
  div(id = "main-content",
    h2("Main Content"),
    p("This content shifts when the panel opens/closes")
  )
)

server <- function(input, output, session) {
  observeEvent(input$side_panel_state, {
    state <- input$side_panel_state
    cat("Panel is:", ifelse(state$isOpen, "open", "closed"), "\n")
    cat("Selected item:", state$selectedItem, "\n")
  })
}

shinyApp(ui, server)

Features

  • React-based: Built with React and ReactR for better performance and maintainability
  • Dynamic Content: Support for Shiny widgets and uiOutput in panel content
  • Flexible Positioning: Panel can be positioned on left or right side
  • Responsive: Adapts to different screen sizes
  • Shiny Integration: Full integration with Shiny's reactive system

Development

This package uses:

  • React for UI components
  • ReactR for Shiny integration
  • Webpack for bundling
  • Babel for JavaScript transpilation

License

MIT