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
Related
Almost all the references online mention the use of MDX with React.js. Even though other frameworks or libraries support MDX (with help of components), I haven't specifically seen the use of ".mdx" file formats outside of React.
The support of ".mdx" files in Gatsby and Next.js allows us to create a separate folder for the blog posts and have them stored anywhere (CMS, Github etc...) which helps in organizing. And the file extension of ".mdx" itself is pretty straight-forward and self-explanatory even for a beginner to grasp the concept.
So I was just wondering - If I would like to use mdx files, am I limited to React.js? Is it possible to use Svelte, Vue, Angular as well?
Yes you can use mdx outside of React but not everywhere, Check out this guides I hope they help!
mdx for Vue.js: https://mdxjs.com/guides/vue/
mdx for Svelte(MDsveX): https://madewithsvelte.com/mdsvex
MDX as such is specifically for React because it uses JSX to define it's component.
I am sure there are alternatives for other frameworks, as a Svelte user myself I know that at least Svelte has MDSVEX which is basically the same.
I was writing an application with MaterialUI components and have a lot of things so far. Then I found this great landing page/welcome page Landy that uses Antd, still, it would be the easiest for me to just use it.
Is there any problem with using two different design tools in one project? Does it make the website heavy? Can I optimize it somehow or should I migrate slowly to one of them?
don't worry about that, likely you have webpack , rollup, or any other tool that will execute a tree shaking for you so it will only import the used part and not the whole lib
Yeah it is ok to use as many libraries you want, but using too many libraries will make your code heavier, so it is recommended to use only 1 UI library
Yes, It is ok to use multiple frameworks in a single app. You can use antd or material-ui components with their import statement. Nothing to conflict each others.
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).
I have a fundamental question related to React.
For example, i want to use ths third-party libray: https://metroui.org.ua/stepper.html#_stepper_events (example component, that has special callbacks) with react.
But this library doesnt have react bindings. So, i want to find out the right way to use it.
Should i use it with JQuery? With library, that shipped with this framework? (Metro.js in this way https://metroui.org.ua/events.html) Should i use this library at all?
Thank you in advance!
I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.