How to pass child component when using `createReactShinyInput`?

[swsoyee]

Thank you for your excellent work! I'm considering create a package which is going to use createReactShinyInput to create my own shiny inputs, but I have no idea about how to pass child component to JavaScript side, and struggle for a long time with try and error.

I have check the colorpicker-example, but in this example it doesn't show that how to pass child component.

Is there a way to make it?

createReactShinyInput(
  inputId,
  "myInput",
  dependencies,
  default = NULL,
  components = list(childComponents), # <- for example providing a parameter to pass the child components
  configuration = list(),
  container = htmltools::tags$div
)

const MyInput = () => {
  return(
    <myInput>
      { childComponents }
    </myInput>
  )
}

[timelyportfolio]

@swsoyee Sorry, I am just now seeing this. I wrestled with this issue in https://github.com/timelyportfolio/dataui. My solution is unfortunately quite messy by manually adding the components argument as children to the tag as shown in https://github.com/timelyportfolio/dataui/blob/master/R/duisparkline.R#L108-L120. dataui is a widget though, and I think you are after something similar for an input. If I find some time, I'll try to extend the example to demonstrate something similar with an input.

Thanks so much for the issue, and I'd love any ideas, feedback, examples that you might have to enrich the R + react community and experience.

[swsoyee]

@timelyportfolio Thank you for your answer, I'll take a look at how you've implemented it in dataui, and I'm looking forward to seeing your examples! Thank you so much for developing reactR and for bringing modern React into the world of R. Both R and React are my main languages, so I'll find a way to contribute to this community when I have time.

[timelyportfolio]

@swsoyee I had forgotten that Shiny inputs do not use @alandipert magic hydrate function like widgets do. I think using reactR.hydrate from https://github.com/react-R/reactR/blob/master/srcjs/react-tools.js will be the key. Here is the source for hydrate. tag should look like the following and children can be nested.

{
  name: /name of the React component or tag/,
  attrib: /props for the component/,
  children: /child components expressed as an array of tag objects/
}

I hope to show a minimal example this weekend. Let me know if you make any progress between now and then.

[timelyportfolio]

@swsoyee couldn't wait for the weekend. Here is a really quick proof of concept with an example. Let me know if you have any questions or ideas.

[swsoyee]

@timelyportfolio It's really cool! I'll try it out soon and left some comments if I have any other questions.

[Coding-Crashkurse]

@timelyportfolio @swsoyee : Have you tried more complex inputs like this:

children=list(datatable(iris))

I tried it and get the following error: Fehler: No method asJSON S3 class: htmlwidget

Is there a workaround to get this to fixed?