I have a react application that uses Joy UI. I would like to use material UI as well. Can I use material UI and Joy UI together in a react app? If so how?
The official doc is live! Thanks Per Sunde for the fast info.
https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/
Yes, you can use Joy UI with Material UI (MUI), but you will have to implement a workaround, otherwise some components will throw an error and not work well or work at all.
siriwatknp updated the code and wrote a guide about how to use Joy UI and Material UI together. If you dont implement the fix described in the guide, then it will most likely fail when you try to use both libraries in the same project.
See the guide on how to use Joy and Material UI together here:
https://github.com/mui/material-ui/blob/master/docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md
:::warning warning Note: Once Joy UI reaches component parity with Material UI, we recommend you to choose one or the other. Not only do they have a different design language (and therefore a different theme structure) but they would increase your bundle size as well as potentially create unnecessary complexities. :::
I believe they will post this guide on the official website soon, but I can only find the guide in their Github repo.
Update:
Guide is now on their official website:
https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/
Related
Hi everyone. I am currently building a new project using React, MongoDB and Express (MERN Stack basics)
Is there any other recommendations as to what material library source I can use, to veer away from Bootstrap.
With Angular, it's Angular Material is ofcourse a winner, but I am specifically looking for React Material Libraries without hassles.
Please leave your recommendations for me, I'd appreciate it tremendously!
You can use mui library src is MUI
MUI comes with dozens of ready-to-use components in the core. These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system:
The system lets you quickly build custom UI components leveraging the values defined in your theme.
I need to use https://fezvrasta.github.io/bootstrap-material-design/ for my web app. I can see npm version also available at https://www.npmjs.com/package/bootstrap-material-design. I am looking for a better solution and guidelines to use it in react. I had looked MDB i.e https://mdbootstrap.com/. This UI kit having react version. But compared to first one, this is a little bit less attractive. Can any help me out this?
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 find that there are 2 UI components for React Native which are mostly used. I want to use one of them. Which one of them is more easy to use and customizable ?
Currently, there are 3 main UI libraries:
Shoutem UI Components
React Native Elements
Native Base components
Shoutem UI components are actually only one part of Shoutem UI Toolkit, which includes:
UI components - customizable set of components for RN applications
Theme - style your RN components on one place
Animation - set of declarative animations
UI components come with the predefined beautiful design, so creating good looking applications is as easy as simply c/p-ing the component's code. However, they can be fully customized with a theme from one place, so you can achieve the separation of concerns for your components. Animations can be used in similar matter, too.
To see which kind of UI components are there, include <Examples> components in your screen, as described here.
React Native Elements simplify the usage of common components in React Native. Native Base does that too, allows you to customize them and has a better documentation than React Native Elements.
Disclaimer: I work at Shoutem
All the above three libraries are good and serve their own purposes. It totally depends once after you use all of these.
NativeBase is a mobile application development framework; builds a layer on top of React Native that provides you with basic set of components for mobile application development which helps you to develop world-class application experiences on native platforms.
NativeBase gives you the potential of building applications that run on iOS and Android using a single codebase. It eases out your development.
Since NativeBase is built on top of React Native, hence with any component you can pass the style property which will be merged to the default style of that component. This also goes with the callback events. Highly customizable with the theme from one place.
All this is neatly documented by NativeBase. Docs of NativeBase gives you complete information about its usage with sample output, its replacing React Native element, how to style each component, how to customize theme for each component, many more.
Also that NativeBase is being rewritten to enhance its ease of use. To be released very soon.
Go ahead and try NativeBase!
Checkout the working demonstration of NativeBase components in one single kit NativeBase-KitchenSink.
Disclaimer: I work at NativeBase
Both are excellent. Shoutem has some pretty cool animation transitions. You can't go wrong with either. My advice is to review each and pick the one that either feels more right or matches your requirements best.
And don't forget to check out React Native Elements too
You can either use NativeBase or Shoutem UI. Both are slightly different than each other. NativeBase is designed over platform recommendations and inspired by Ionic whereas Shoutem has it's own fluent and clean design.
I've played around with native-base and Shoutem UI. Both of them fully customized.
I like Shoutem than the other because it has more feature, animation, extension, builder, etc. But unfortunately, Shoutem UI currently doesn't support the latest react-native (>0.40) and expo(> 15.0). So I hold my plan to use this for production.
I think this is because the latest RN deprecated NavigationExperimental and
Expo SDK use react-native-svg >= 5.2.0. CMIIW
I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/