withStates {shinyChakraUI}

Chakra component with states or hooks

Description

Create a Chakra component with React states and/or hooks.

Usage

withStates(component, states)

Arguments

component

a React component

states

named list of states; a state value can be an R object serializable to JSON, a React component (Tag$Component(...)), a Shiny widget, some HTML code defined by the HTML function, a JSX element defined by the jsx function, a JavaScript value defined by the jseval function, or a hook such as useDisclosure() (see useDisclosure).

Value

A component to use in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    withStates(

      Tag$Fragment(

        Tag$Container(
          maxW = "xl",
          centerContent = TRUE,
          bg = "orange.50",
          Tag$Heading(
            getState("heading")
          ),
          Tag$Text(
            "I'm just some text."
          )
        ),

        br(),
        Tag$Divider(),
        br(),

        Tag$Button(
          colorScheme = "twitter",
          display = "block",
          onClick = jseval(
            "() => setState('heading', 'I am the new heading.')"
          ),
          "Click me to change the heading"
        )

      ),

      states = list(heading = "I am the heading.")

    )

  )

)

server <- function(input, output, session){}

if(interactive()){
  shinyApp(ui, server)
}