You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is not an issue, rather a comment with examples.
Hooks have been around in React for a few releases now and they can make integration with 3rd party DOM libraries much easier.
As an example, integrating Plotly can be as simple as this:
This tiny function gives a lot of the functionality of react-plotly. Like react-plotly, it is 'dumb' in that you must update the props (layout, config, state) for it to update (and that update must be immutable).
Since all rendering of the parent <div> is handed off to the caller, there is no need to accept props such as divId, className, style. In doing so, the code is both simplified and less restrictive to the user.
Immutable updates can be a pain to manage, but we can also offload that to the hook. In the next example, I am making use of streams (from the excellent flyd library, but you could use rxjs, most, xstream, kefir etc...) so that the user can just pass partial updates:
I am using mergeDeepRight from ramdajs to merge the previous state with the partial update, but you could use your own function (e.g. based on immerJS for example, or using JSON Patch).
A more complex example. Plotly's/react-plotly's responsive behaviour has always bugged me. The responsive property only responds to window resize events. I often want to allow users to resize the individual element holding the chart. Using hooks, streams and the ResizeObserver API, this is trivial:
I also included a debounce function (easy to implement natively or take from e.g. lodash) to prevent to many redraws when you are actively dragging to resize.
OK, final example. With hooks, it becomes trivial to expose other parts of the plotly API. Here I include all of the previous examples and add a stream which will take data updates to pass directly to Plotly.extendTraces:
Overall, my point is that I think hooks allow you to provide a smaller, more flexible and easy to use API. I would love to see a usePlotly hook (hopefully incorporating some of the ideas above as options) as an alternative to the <Plot> widget.
The text was updated successfully, but these errors were encountered:
This is not an issue, rather a comment with examples.
Hooks have been around in React for a few releases now and they can make integration with 3rd party DOM libraries much easier.
As an example, integrating Plotly can be as simple as this:
It exposes a callback ref which is used like so:
This tiny function gives a lot of the functionality of react-plotly. Like react-plotly, it is 'dumb' in that you must update the props (layout, config, state) for it to update (and that update must be immutable).
Since all rendering of the parent
<div>
is handed off to the caller, there is no need to accept props such asdivId
,className
,style
. In doing so, the code is both simplified and less restrictive to the user.Immutable updates can be a pain to manage, but we can also offload that to the hook. In the next example, I am making use of streams (from the excellent flyd library, but you could use rxjs, most, xstream, kefir etc...) so that the user can just pass partial updates:
Here, you can just push partial updates on to the
updates
stream:I am using
mergeDeepRight
fromramdajs
to merge the previous state with the partial update, but you could use your own function (e.g. based on immerJS for example, or using JSON Patch).A more complex example. Plotly's/react-plotly's responsive behaviour has always bugged me. The
responsive
property only responds to window resize events. I often want to allow users to resize the individual element holding the chart. Using hooks, streams and the ResizeObserver API, this is trivial:Here, I used ramdajs to extract the new size information from the ResizeObserver callback, but it could be written in a more imperative style as:
I also included a debounce function (easy to implement natively or take from e.g. lodash) to prevent to many redraws when you are actively dragging to resize.
OK, final example. With hooks, it becomes trivial to expose other parts of the plotly API. Here I include all of the previous examples and add a stream which will take data updates to pass directly to
Plotly.extendTraces
:Overall, my point is that I think hooks allow you to provide a smaller, more flexible and easy to use API. I would love to see a
usePlotly
hook (hopefully incorporating some of the ideas above as options) as an alternative to the<Plot>
widget.The text was updated successfully, but these errors were encountered: