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).
Related
I've been working with react and react native for a while and there's a library that caught my attention: Preact. I learned it (that being a react developer was not difficult), I did some PWA's to practice (Copying medium-sized projects that I've done in the past) and, if you know what Preact is, it goes without saying my impression. It seems incredible to me. My question is: is there a way to work with react native using Preact? Maybe with preact-compat?
Not out of the box, no. See this discussion from GitHub
The short answer is: use a native wrapper that exposes DOM.
The long answer is that there are woefully few options for this. Some time ago, I had begun building a DOM interface to React Native, but I have no experience with React Native whatsoever and I'm likely not the best person to do that implementation.
I do know that folks have used Preact with NativeScript and had some success: NativeScript doesn't expose a Web-compatible DOM, but its UI primitives are still quite easily mapped to DOM primitives:
https://github.com/staydecent/nativescript-preact
https://github.com/NathanaelA/nativescript-dom/blob/master/src/dom.js
It would also be relatively easy to implement a nativescript-preact using the source of nativescript-vue, which implements a simple DOM on top of NativeScript's UI components that Vue then renders to:
https://github.com/nativescript-vue/nativescript-vue/tree/master/platform/nativescript
It's also worth noting that preact-compat is the legacy package, used for Preact 8.x and prior. preact/compat is where you'd get compat going forward.
I am trying to wrap my head around framer-motion, a really nice animation library which I am trying to use in combination with NextJS.
I followed a CSS tricks youtube video, which explained layoutTransition using this sandbox:
https://codesandbox.io/s/framer-motion-css-tricks-template-3-07wkh?fontsize=14&module=/src/Image.tsx&file=/src/Image.tsx:0-783
Eager to try it out I copied into my NextJs project, but I couldn't get it to work. I stripped away everything to make it even cleaner and ended up with these sandboxes: One is React, the other is NExtJS. To me they are identical, but the zooming of the image using layoutTransition doesn't seem to work in my NextJS sandbox, why?
https://codesandbox.io/s/framer-motion-image-zoom-forked-774up
https://codesandbox.io/s/currying-haze-wii0m
I had the very same problem which has taken me well to much time to fix. So the reason it doesn't work for your next app is that your framer-motion version is above 2.0. Downgrade it to the latest v1 which is 1.11.1 and you should be fine. I don't have any idea why layoutTransitions stopped working since v2, did not found any info about this problem.
I find framer-motion wonderful but it lacks good documentation and community does not to seem to be substantial yet
I'm currently writing a few components I want to open source and I always struggle to find the right way to bundle my components and logic so it can be easily imported in any React project.
I want to use React hooks and my current way of using tsc for it (I prefer Typescript) is not really working because React complains that React Hooks need to be used inside a function component (which they are, it seems TSC kicks out some of the context).
Are there any good resources for that or even boilerplates? Thank you already for your answers. Cheers to everyone contributing! I owe you.
You can use create-react-library. It also supports typescript.
I jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.
Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.
Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.
As a very beginner, I'm curious about how people usually work on UI in React?
Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.
Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.
In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.
To use both:
You can use on Elements Semantic-UI(ReactJS or direct element with the className),
You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
You can combine the open source community UI parts with your own CSS.
You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.
To use standalone Semantic-UI:
I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.
You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
You are ready to go with every project with Semantic-UI-React for web/mobile site.
You have to learn basics of less-lang.
You can change everything from your theme files which variables.
Lastly,
If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.
It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.
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