I've recently started using react and so far I'm enjoying it a lot.
However I'm struggling with the documentation.
I've seen some mentions of unstable_renderSubtreeIntoContainer / renderSubtreeIntoContainer mentioned here (github).
In which context would I use this? How would I use it?
Thanks a lot in advance!
One of the use cases is "portals" - when you need to render a component outside the react app, but still control it as usual.
For example - https://github.com/tajo/react-portal/blob/master/lib/portal.js#L135
Related
I recently came across a use-case where I need to measure the components dimensions on runtime. On exploring the solutions I found a tutorial which uses a built in method called findNodeHandle. To be precise it was getting used as first argument of measureLayout method.
I tried exploring the use of findNodeHandle but could not find anything.
Can anyone please guide me a little bit on what exactly findNodeHandle does in react.
Instead of having many dependencies for individual hooks, I am interested in a single curated and tested library like Vueuse, but for React. Does something like this exist?
For instance, in Vue projects I would often use https://vueuse.org/core/useStorage/, https://vueuse.org/core/computedAsync/ and https://vueuse.org/shared/useToggle/, but many others as well.
The list of built in React Hooks seems quite limited: https://reactjs.org/docs/hooks-reference.html
What about https://github.com/streamich/react-use? Otherwise you could try using #vueuse directly in your react components thank to reactivue!
I found https://ahooks.js.org/ which does what I need
I'm trying to use react-tsParticle. I'm interested in "Fireworks preset" but unfortunately that is not working.
I've seed some examples like this codepen one.
But If I use that option/config that doesn't works. it created some fireworks blast in the bottom but its useless screenshot.
But If I use that codepen example in that way that works. But that's not how it meant to use in react. Any help will be appreciated.
For a while I've been using the react-tippy package, but it hasn't been updated in a long time and it has many bugs.
Recently #atomiks published a react wrapper for his tippy.js library.
I've used succesfully until I need to use it together with React-Router or Redux.
I've created a sandbox that replicates the issue ➡ https://codesandbox.io/s/9yr3rmrkny
Ideally somebody is able to figure out how to tweak the tippy.js wrapper to render the tippyInstance with Context (for both redux and react-router)
Actually Tippy has upgraded to v3 and they now have a really good support for react.
https://github.com/atomiks/tippy.js-react
This issue I posted is no longer an issue with the newer version and React Component
The problem is with the internals of how Tippy works, I.E. manipulating the DOM directly rather than going through the React provided virtual-dom. Due to this fact, it would be suggested to not use Tippy with React at all because it breaks the same rules as using jQuery with React. see here
Sadly, updating the wrapper wouldn't help anything as the DOM manipulation is happening within the Tippy source code, rather than the react wrapper.
What I ended up doing was rebuilding the Tippy functionality I needed in React.
There are also other tooltip libraries that are geared better for React that could be looked into.
I realize this isn't the most helpful answer, but wanted to share what I ran into, also thanks for asking this because it helped figure out what was causing my bug.
EDIT
as pointed out in previous answer, and comment. This is an issue with old version of tippy (v<3.0).
everyone. How can I implement such thing(jQUery Selectable) in my react&redux app? I need to know what items were selected and change my store respectively. I have read about D&D but have no idea, how to do it in react&redux way. Thank you.
You can use the following library , i've used it couple of times, it served the purpose
http://pablofierro.github.io/react-drag-select/
check the article React DnD Intro for the Redux developer
for built in drag&drop functionality
or you can include some good library to do the task they are many that you can find check https://github.com/clauderic/react-sortable-hoc or http://react-dnd.github.io/react-dnd/