Search code examples
reactjswidgetcreate-react-apppreviewreact-widgets

How to create a portal which can realtime preview widgets and generate widget embeddable link using React


I am trying to build a portal to create widgets. This portal will allow users to create different types widgets and preview how that widget look like in realtime.

Finally, this portal should be able to generate a unique link for a particular widget which has the capability of rendering the same widget configured by the user in anywhere when they pasted it (ex: like an online article).

For you reference I am attaching a design of my preview page.(https://drive.google.com/open?id=1lP3h5YYExrPWOcAaRmf2YupZ6qjqrINH)

Please help me to find the best way to implement this by using React.


Solution

  • You can use redux and store the widget preview config (widget name, layout, color, ...)

    So your preview render will base on the stored widget conf Your side parts will update the stored config

    All your update will rerender the widget preview with the new config