Example of reactR input helpers

colorpicker.js

import * as pickers from 'react-color';
import { reactInput } from 'reactR';

const ColorPicker = ({ configuration, value, setValue }) => {
  const picker = pickers[configuration.type];
  return React.createElement(picker, {
    color: value,
    onChangeComplete: color => setValue(color.hex)
  });
};

reactInput('.colorpicker', 'reactR.ColorPicker', ColorPicker);

colorpicker.R

picker_types <- c(
  "sketch",
  "alpha",
  "block",
  "chrome",
  "circle",
  "compact",
  "github",
  "hue",
  "material",
  "photoshop",
  "slider",
  "swatches",
  "twitter"
)

capitalize <- function(s) {
  gsub("^(.)", perl = TRUE, replacement = '\\U\\1', s)
}

#' Color picker input.
#'
#' @param inputId
#' @param defaultColor
#' @param type
#'
#' @return
#' @export
#'
#' @examples
colorpickerInput <- function(inputId, defaultColor = "#fff", type = picker_types) {
  color <- restoreInput(id = inputId, default = defaultColor)
  type <- paste0(capitalize(match.arg(type)), "Picker")
  reactR::createReactInput(
    inputId,
    "colorpicker",
    htmltools::htmlDependency(
      name = "react-color-input",
      version = "1.0.0",
      src = "www/colorpicker",
      package = "colorpicker",
      script = "colorpicker.js"
    ),
    color,
    list(type = type),
    htmltools::tags$div
  )
}