Package 'shinyChakraUI'

Description

An alert dialog widget.

Usage

chakraAlertDialog(
  inputId,
  options = chakraAlertDialogOptions(),
  openButton,
  header,
  body,
  footer
)

Arguments

Details

You can use an action attribute and a value attribute to the Chakra buttons you put in the widget. For example, if you include the Chakra button Tag$Button("Cancel", action = "cancel", value = "CANCEL"), clicking this button will cancel the alert dialog and will set the Shiny value "CANCEL". Other possible action attributes are "close" to close the alert dialog, "disable" to disable the alert dialog, and "remove" to entirely remove the widget.

Value

A widget that can be used in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    chakraAlertDialog(
      inputId = "alertDialog",
      openButton = Tag$Button(
        leftIcon = Tag$DeleteIcon(),
        colorScheme = "red",
        "Delete customer"
      ),
      header = Tag$AlertDialogHeader(
        fontSize = "lg",
        fontWeight = "bold",
        "Delete customer?"
      ),
      body = Tag$AlertDialogBody(
        "Are you sure? You can't undo this action afterwards."
      ),
      footer = Tag$AlertDialogFooter(
        Tag$ButtonGroup(
          spacing = "3",
          Tag$Button(
            action = "cancel",
            value = "CANCEL",
            "Cancel"
          ),
          Tag$Button(
            action = "disable",
            value = "DISABLE",
            colorScheme = "red",
            "Disable"
          ),
          Tag$Button(
            action = "remove",
            value = "REMOVE",
            "Remove"
          )
        )
      )
    )

  )

)

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

  observe({
    print(input[["alertDialog"]])
  })

}

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

Description

Options for the alert dialog widget (chakraAlertDialog).

Usage

chakraAlertDialogOptions(
  closeOnEsc = TRUE,
  colorScheme = "red",
  isCentered = TRUE,
  motionPreset = "scale",
  size = "md",
  ...
)

Arguments

Value

A named list, for usage in chakraAlertDialog.

Description

A widget with a parent checkbox and child checkboxes.

Usage

chakraCheckboxWithChildren(
  inputId,
  parentCheckbox,
  ...,
  stackAttributes = list(pl = 6, mt = 1, spacing = 1)
)

Arguments

Value

A widget to use in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    chakraCheckboxWithChildren(
      "cwc",
      Tag$Checkbox(
        "Parent checkbox"
      ),
      Tag$Checkbox(
        "Child checkbox 1"
      ),
      Tag$Checkbox(
        defaultChecked = TRUE,
        "Child checkbox 2"
      )
    )

  )

)

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

  observe({
    print(input[["cwc"]])
  })

}

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

Description

List of Chakra color schemes (to use as a colorScheme attribute in e.g. Chakra buttons).

Usage

chakraColorSchemes()

Value

The names of the Chakra color schemes in a vector.

Examples

chakraColorSchemes()

Description

A widget combining a slider and a number input.

Usage

chakraCombinedSlider(
  id,
  value,
  min,
  max,
  step = NULL,
  maxWidth = "400px",
  numericInputOptions = numberInputOptions(),
  spacing = "2rem",
  keepWithinRange = TRUE,
  clampValueOnBlur = TRUE,
  focusThumbOnChange = FALSE,
  trackColor = NULL,
  filledTrackColor = NULL,
  tooltip = TRUE,
  tooltipOptions = sliderTooltipOptions(),
  thumbOptions = sliderThumbOptions(),
  ...
)

Arguments

Value

A widget to use in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(), br(),

  chakraComponent(
    "mycomponent",

    chakraCombinedSlider(
      "slider",
      value = 5,
      min = 0,
      max = 10,
      step = 0.5,
      maxWidth = "300px",
      tooltip = TRUE,
      trackColor = "green.300",
      thumbOptions = sliderThumbOptions(
        width = 20, height = 20,
        borderColor = "firebrick", borderWidth = "3px"
      )
    )

  )

)

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

  observe({
    print(input[["slider"]])
  })

}

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

Description

Create a Chakra component.

Usage

chakraComponent(componentId, ...)

Arguments

Value

A Shiny widget to use in a UI definition, preferably in chakraPage.

Description

Create a drawer widget, a panel that slides out from the edge of the screen.

Usage

chakraDrawer(
  inputId,
  openButton,
  options = chakraDrawerOptions(),
  isOpen = FALSE,
  closeButton = TRUE,
  header,
  body,
  footer
)

Arguments

Details

Similarly to chakraAlertDialog, you can set an action attribute and a value attribute to the Chakra buttons you include in the Chakra drawer.

Value

A widget to use in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    chakraDrawer(
      "drawer",
      openButton = Tag$Button("Open Drawer"),
      options = chakraDrawerOptions(placement = "right"),
      header = Tag$DrawerHeader("I'm the header"),
      body = Tag$DrawerBody(
        Tag$Box("I'm the body")
      ),
      footer = Tag$DrawerFooter(
        Tag$ButtonGroup(
          spacing = "6",
          Tag$Button(
            value = "try me",
            "Try me"
          ),
          Tag$Button(
            action = "close",
            variant = "outline",
            "Close"
          )
        )
      )
    )

  )

)

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

  observe({
    print(input[["drawer"]])
  })

}

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

Description

Options for the drawer widget (chakraDrawer).

Usage

chakraDrawerOptions(
  closeOnEsc = TRUE,
  closeOnOverlayClick = TRUE,
  colorScheme = NULL,
  isCentered = FALSE,
  isFullHeight = FALSE,
  motionPreset = "scale",
  placement = "right",
  size = "xs",
  ...
)

Arguments

Value

A named list, for usage in chakraDrawer.

Description

A function to run examples of Shiny apps with Chakra components.

Usage

chakraExample(example, display.mode = "showcase", ...)

Arguments

Value

No return value, just launches a Shiny app.

Examples

if(interactive()){
  chakraExample("Menu")
}

Description

List of Chakra examples.

Usage

chakraExamples()

Value

No return value, only prints a message listing the Chakra examples.

Examples

chakraExamples()
if(interactive()){
  chakraExample("MenuWithGroups")
}

Description

List of Chakra icons.

Usage

chakraIcons()

Details

See all chakra icons.

Value

The names of the Chakra icons in a vector.

Examples

chakraIcons()

Description

A modal widget.

Usage

chakraModal(
  inputId,
  options = chakraModalOptions(),
  openButton,
  isOpen = FALSE,
  header,
  body,
  footer
)

Arguments

Details

You can use an action attribute and a value attribute to the Chakra buttons you put in the widget. For example, if you include the Chakra button Tag$Button("Close", action = "close", value = "CLOSE"), clicking this button will close the modal and will set the Shiny value "CLOSE". Other possible action attributes are "cancel" to cancel, "disable" to disable the modal, and "remove" to entirely remove the modal.

Value

A widget that can be used in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    chakraModal(
      inputId = "modal",
      openButton = Tag$Button(
        colorScheme = "orange",
        "Open Modal"
      ),
      header = Tag$ModalHeader(
        fontSize = "lg",
        fontWeight = "bold",
        "Modal title"
      ),
      body = Tag$ModalBody(
        "Sit nulla est ex deserunt exercitation anim occaecat."
      ),
      footer = Tag$ModalFooter(
        Tag$ButtonGroup(
          spacing = "3",
          Tag$Button(
            action = "close",
            value = "CLOSE",
            "Close"
          ),
          Tag$Button(
            action = "cancel",
            colorScheme = "red",
            "Cancel"
          )
        )
      )
    )

  )

)

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

  observe({
    print(input[["modal"]])
  })

}

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

Description

Options for the modal widget (chakraModal).

Usage

chakraModalOptions(
  closeOnEsc = TRUE,
  isCentered = TRUE,
  motionPreset = "scale",
  size = "md",
  ...
)

Arguments

Value

A named list, for usage in chakraModal.

Description

Function to be used as the ui element of a Shiny app; it is intended to contain some chakraComponent elements.

Usage

chakraPage(...)

Arguments

Value

A UI definition that can be passed to the shinyUI function.

Description

Create a pin input widget.

Usage

chakraPinInput(
  id,
  label = NULL,
  nfields,
  type = "alphanumeric",
  size = "md",
  mask = FALSE,
  defaultValue = ""
)

Arguments

Value

A widget to use in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(
  br(),
  chakraComponent(
    "mycomponent",
    chakraPinInput(
      "pininput", label = tags$h2("Enter password"),
      nfields = 3, mask = TRUE
    )
  )
)

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

  observe({
    print(input[["pininput"]])
  })

}

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

Description

Create a Chakra range slider.

Usage

chakraRangeSlider(
  id,
  label = NULL,
  values,
  min,
  max,
  step = NULL,
  width = NULL,
  size = "md",
  colorScheme = "blue",
  orientation = "horizontal",
  focusThumbOnChange = TRUE,
  isDisabled = FALSE,
  isReadOnly = FALSE,
  isReversed = FALSE,
  trackColor = NULL,
  filledTrackColor = NULL,
  tooltip = TRUE,
  tooltipOptions = sliderTooltipOptions(),
  thumbOptionsLeft = sliderThumbOptions(),
  thumbOptionsRight = sliderThumbOptions(),
  shinyValueOn = "end",
  ...
)

Arguments

Value

A widget to use in chakraComponent.

Examples

# Run `chakraExample("RangeSlider")` to see a better example.
library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    chakraRangeSlider(
      "slider",
      label = HTML("<span style='color:red'>Hello range slider!</span>"),
      values = c(2, 8),
      min = 0,
      max = 10,
      width = "50%",
      tooltip = TRUE,
      tooltipOptions = sliderTooltipOptions(placement = "bottom"),
      shinyValueOn = "end"
    )

  )

)

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

  observe({
    print(input[["slider"]])
  })

}

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

Description

Create a Chakra slider.

Usage

chakraSlider(
  id,
  label = NULL,
  value,
  min,
  max,
  step = NULL,
  width = NULL,
  size = "md",
  colorScheme = "blue",
  orientation = "horizontal",
  focusThumbOnChange = TRUE,
  isDisabled = FALSE,
  isReadOnly = FALSE,
  isReversed = FALSE,
  trackColor = NULL,
  filledTrackColor = NULL,
  mark = FALSE,
  markOptions = sliderMarkOptions(),
  tooltip = TRUE,
  tooltipOptions = sliderTooltipOptions(),
  thumbOptions = sliderThumbOptions(),
  shinyValueOn = "end",
  ...
)

Arguments

Value

A widget to use in chakraComponent.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    chakraSlider(
      "slider",
      label = HTML("<span style='color:red'>Hello slider!</span>"),
      value = 5,
      min = 0,
      max = 10,
      width = "50%",
      tooltip = TRUE,
      shinyValueOn = "end"
    )

  )

)

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

  observe({
    print(input[["slider"]])
  })

}

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

Description

The 'createStandaloneToast' hook.

Usage

createStandaloneToast()

Details

See Standalone toasts.

Value

A list containing some URL-encoded JavaScript code.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    withStates(

      Tag$Button(
        colorScheme = "orange",
        size = "lg",
        onClick = jseval(paste(
          '() => {',
          '  const toast = getState("toast");',
          '  toast({',
          '    position: "bottom",',
          '    title: "Account created.",',
          '    description: "We have created your account for you.",',
          '    status: "success",',
          '    duration: 3000,',
          '    isClosable: true',
          '  });',
          '}',
          sep = "\n")),

        "Show toast"
      ),

      states = list(toast = createStandaloneToast())

    )

  )

)

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

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

Description

Chakra hooks are JavaScript objects; this function allows to get a property (key) of a hook. See useDisclosure for an example.

Usage

getHookProperty(hook, property)

Arguments

Value

A list like the return value of jseval.

Description

Get the value of a React state.

Usage

getState(state)

Arguments

Value

A list like the return value of jseval.

See Also

withStates

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    withStates(
      Tag$Fragment(

        Tag$Box(
          bg = "yellow.100",
          fontSize = "30px",
          width = "50%",
          getState("boxtext")
        ),

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

        Tag$Button(
          colorScheme = "telegram",
          size = "lg",
          onClick = jseval('() => setState("boxtext", "Hello Chakra")'),
          "Change box text"
        )
      ),

      states = list(boxtext = "I am the box text")
    )

  )

)

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

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

Description

List of ionicons.

Usage

ionIcons()

Details

See ionicons website.

Value

The names of the ionicons in a vector.

Examples

ionIcons()

Description

Evaluate JavaScript code in the application.

Usage

jseval(code)

Arguments

Value

A list containing the URL-encoded JavaScript code.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    Tag$Button(
      colorScheme = "pink",
      size = "lg",
      onClick = jseval('() => alert("Hello Chakra")'),
      "Trigger alert"
    )

  )

)

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

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

Description

Create a JSX element.

Usage

jsx(element, preamble = "")

Arguments

Value

A list containing the URL-encoded strings element and preamble.

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  chakraComponent(
    "mycomponent",

    jsx(paste(
      '<>',
      '  <Button onClick={onOpen}>Open Modal</Button>',
      '  <Modal isOpen={isOpen} onClose={onClose}>',
      '    <ModalOverlay />',
      '    <ModalContent>',
      '      <ModalHeader>Modal Title</ModalHeader>',
      '      <ModalCloseButton />',
      '      <ModalBody>',
      '        Sit nulla est ex deserunt exercitation anim occaecat.',
      '      </ModalBody>',
      '      <ModalFooter>',
      '        <Button colorScheme="blue" mr={3} onClick={onClose}>',
      '          Close',
      '        </Button>',
      '        <Button variant="ghost" onClick={setShinyValue}>',
      '          Secondary Action',
      '        </Button>',
      '      </ModalFooter>',
      '    </ModalContent>',
      '  </Modal>',
      '</>',
      sep = "\n"
    ),

    preamble = paste(
      'const { isOpen, onOpen, onClose } = useDisclosure();',
      'const setShinyValue = () => Shiny.setInputValue("modal", "action");',
      sep = "\n"
    )

  ))

)

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

  observe({
    print(input[["modal"]])
  })

}

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

Description

Given a JSX string, this function prints the code of the corresponding React component that can be used in chakraComponent.

Usage

jsxString2code(jsxString, clipboard = TRUE)

Arguments

Value

No return value, only prints the code in the console and copy it to the clipboard if clipboard = TRUE.

Note

Instead of using this function, rather use the RStudio addin provided by the package. Simply copy some JSX code to your clipboard, and select the 'JSX parser' addin in the RStudio Addins menu.

Examples

jsxString <- '<Input type="email" id="myinput" />'
jsxString2code(jsxString)
jsxString <- '<Button onClick={() => alert("hello")}>Hello</Button>'
jsxString2code(jsxString)

Description

Create a list of options to be passed to the numericInputOptions argument in chakraCombinedSlider.

Usage

numberInputOptions(
  precision = NULL,
  maxWidth = "80px",
  fontSize = NULL,
  fontColor = NULL,
  borderColor = NULL,
  focusBorderColor = NULL,
  borderWidth = NULL,
  incrementStepperColor = NULL,
  decrementStepperColor = NULL,
  ...
)

Arguments

Value

A list of options to be passed to the numericInputOptions argument in chakraCombinedSlider.

Description

Set a React state from the Shiny server.

Usage

setReactState(session, componentId, stateName, value)

Arguments

Value

No return value, called for side effect.

See Also

withStates

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    Tag$Button(
      id = "button",
      className = "action-button",
      colorScheme = "facebook",
      display = "block",
      onClick = jseval("(event) => {event.target.disabled = true}"),
      "Click me to change the content of the container"
    ),

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

    withStates(

      Tag$Container(
        maxW = "xl",
        centerContent = TRUE,
        bg = "yellow.100",
        getState("containerContent")
      ),

      states = list(containerContent = "I am the container content.")

    )

  )

)

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

  observeEvent(input[["button"]], {

    setReactState(
      session = session,
      componentId = "mycomponent",
      stateName = "containerContent",
      value = Tag$Box(
        padding = "4",
        maxW = "3xl",
        fontStyle = "italic",
        fontWeight = "bold",
        borderWidth = "2px",
        "I am the new container content, included in a Box."
      )
    )

  })

}

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

Description

Define the options for the slider mark.

Usage

sliderMarkOptions(
  textAlign = "center",
  backgroundColor = "blue.500",
  textColor = "white",
  margin = "-35px 0 0 -25px",
  padding = "0 10px",
  width = "50px",
  ...
)

Arguments

Value

A list of attributes for usage in chakraSlider.

Description

Define the Chakra slider thumb options.

Usage

sliderThumbOptions(
  width = NULL,
  height = NULL,
  color = NULL,
  borderColor = NULL,
  borderWidth = NULL,
  ...
)

Arguments

Value

A list of attributes for usage in chakraSlider, chakraCombinedSlider, or chakraRangeSlider.

Description

Define the slider tooltip options.

Usage

sliderTooltipOptions(
  hasArrow = TRUE,
  backgroundColor = "red.600",
  color = "white",
  placement = "top",
  closeOnClick = FALSE,
  isOpen = TRUE,
  ...
)

Arguments

Value

A list of attributes for usage in chakraSlider, chakraCombinedSlider, or chakraRangeSlider.

Description

List of super tiny icons.

Usage

superTinyIcons()

Details

See all super tiny icons.

Value

The names of the super tiny icons in a vector.

Examples

superTinyIcons()

Description

Create a React component. This is similar to React.

Usage

Tag

Format

An object of class ReactTagBuilder of length 0.

Examples

Tag$Box(
  bg = "tomato",
  Tag$ButtonGroup(
    spacing = "4",
    Tag$Button(
      "I'm a button"
    ),
    Tag$Button(
      "I'm another button"
    )
  )
)

Description

The 'useClipboard' hook.

Usage

useClipboard(value)

Arguments

Details

See useClipboard.

Value

A list containing some URL-encoded JavaScript code.

See Also

getHookProperty

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    withStates(
      Tag$Box(
        width = "50%",

        Tag$Flex(
          mb = 2,
          Tag$Input(
            isReadOnly = TRUE,
            value = getHookProperty("clipboard", "value")
          ),
          Tag$Button(
            ml = 2,
            onClick = getHookProperty("clipboard", "onCopy"),
            jseval('getState("hasCopied") ? "Copied" : "Copy"')
          )
        ),

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

        Tag$Editable(
          bg = "yellow.100",
          placeholder = "Paste here",
          Tag$EditablePreview(),
          Tag$EditableInput()
        )

      ),

      states = list(
        clipboard = useClipboard("Hello Chakra"),
        hasCopied = getHookProperty("clipboard", "hasCopied")
      )
    )

  )

)

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

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

Description

The 'useDisclosure' hook.

Usage

useDisclosure(defaultIsOpen = FALSE)

Arguments

Details

See useDisclosure.

Value

A list containing some URL-encoded JavaScript code.

See Also

getHookProperty

Examples

library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    withStates(
      Tag$Fragment(

        Tag$Button(
          colorScheme = "teal",
          variant = "outline",
          onClick = getHookProperty("disclosure", "onToggle"),
          "Click me!"
        ),

        Tag$Fade(
          "in" = getHookProperty("disclosure", "isOpen"),
          Tag$Box(
            p = "40px",
            color = "white",
            mt = "4",
            bg = "teal.500",
            rounded = "md",
            shadow = "md",
            "Fade"
          )
        )

      ),

      states = list(disclosure = useDisclosure())
    )

  )

)

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

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

Description

The React 'useRef' hook.

Usage

useRef(initialValue = NA)

Arguments

Value

A list like the return value of jseval.

Description

The 'useToast' hook.

Usage

useToast()

Value

A list containing some URL-encoded JavaScript code.

Note

It does not work well. Use createStandaloneToast instead.

Description

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

Usage

withStates(component, states)

Arguments

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)
}