Use Plots or other HTML Based inputs in ReactR Components possible?

[Coding-Crashkurse]

Hello everybody,

I played around with the reactsTrap example and created a custom Flipcard with received props.

function ActionButton({ configuration }) {
  return (
    <div>
      <div className="flip-card">
        <div className="flip-card-inner">
          <div className="flip-card-front">
            <img
              src={
                "https://www.tageblatt.lu/wp-content/uploads/2019/12/17735_cx__cy__cw__ch_-740x493.jpg"
              }
              style={{ width: 300, height: 500 }}
            />
          </div>
          <div className="flip-card-back">{configuration.label}</div>
        </div>
      </div>
    </div>
  );
}

The R file looks like this:

action_button <- function(
  inputId,
  label
) {
  reactR::createReactShinyInput(
    inputId,
    "action_button",
    htmltools::htmlDependency(
      name = "action_button-input",
      version = "1.0.0",
      src = "www/reactstrapTest",
      package = "reactstrapTest",
      script = "main.js"
    ),
    default = 0,
    configuration = list(
      label = label
    ),
    htmltools::tags$div
  )
}

The example works pretty fine and I am able to pass a label as plain text. What I desire to do is to pass more complex html Elements as props, for example a Plot from HighcharteR.

Passing everything else than plain text results in an Error:

action_button("bla", label = tags$p("test"))
Error: No method asJSON S3 class: shiny.tag

Is it possible to pass more complex objects there?

[stla]

You have to pass URLencode(as.character(tags$p("test"))) to React. Then, in React:

import parse from "html-react-parser";

function unescapeHtml(html) {
  let el = document.createElement("div");
  return html.replace(/\&[#0-9a-z]+;/gi, function (enc) {
    el.innerHTML = enc;
    return el.innerText;
  });
}

parse(unescapeHtml(decodeURI(label))) 

[timelyportfolio]

Key Question

Should reactR do more to help here?

Helpers

Also @stla #61 provides some additional helpers to support cases where shiny.tag is somewhere other than children.

For instance, I think we can view the struggle with this simple example.

> str(component("MyDiv", list(htmltools::tags$div(), slotprop = htmltools::tags$div())))
List of 3
 $ name    : chr "MyDiv"
 $ attribs :List of 1
  ..$ slotprop:List of 3
  .. ..$ name    : chr "div"
  .. ..$ attribs : Named list()
  .. ..$ children: list()
  .. ..- attr(*, "class")= chr "shiny.tag"
 $ children:List of 1
  ..$ :List of 3
  .. ..$ name    : chr "div"
  .. ..$ attribs : Named list()
  .. ..$ children: list()
  .. ..- attr(*, "class")= chr "shiny.tag"
 - attr(*, "class")= chr [1:3] "reactR_component" "shiny.tag" "list"

> component("MyDiv", list(htmltools::tags$div(), slotprop = htmltools::tags$div()))
<MyDiv slotprop="&lt;div&gt;&lt;/div&gt;">
  <div></div>
</MyDiv>

[timelyportfolio]

I have added hydrate of tag-like attributes/props in develop. I'd love it if someone could help me test. Seems to be working but wondering if I might be missing something or potentially causing negative side effects. Thanks.

[timelyportfolio]

closing since I believe 0.6.0 release fixes/resolves this issue. Please feel free to reopen to continue the discussion. Thanks @Coding-Crashkurse for the issue!