How do I pass a variable into a Custom Renderer?

General
1

Hi guys,

I’ve created a custom renderer, which is essentially a button, but I want to pass in a URL string, so when somebody clicks the button it opens another webpage.

I’ve got the button itself set up to do this, but I’m not sure how to pass the URL (chosen by the user) to to custom renderer?

If I add it to the JSON schema somehow, can I grab it from there? Or will I have to store it in redux and pull it down within the custom component.

Regards

Ross

[original thread by Ross Coulbeck]

2

Hi @ross-coulbeck thanks for the question! When the url is stored somewhere within the redux store you could for example write your own mapStateToControlProps where you then connect the url to a prop of your renderer. When the url is stored outside of redux or JSON Forms you could create your own React context which contains the url and is then consumed within your renderer.

3

[Ross Coulbeck]

4

[Ross Coulbeck]

Hi @sdirix, thanks for your reply. I’m not as familiar with Redux, so I’ll go that route if I have to, but was hoping it was possible to pass in the JSON. I know there is a UI Schema for the layout, then another schema for the data. Can I add something like externalLink: ‘www.google.com’ to the data schema, then access it in the component? If so, how do I access it?

Attached screenshot of example