I have a Reactjs app that I'd like to convert from react-strap to Materials-UI. My question is, can I have them both including in the app at the same time? This would allow me to convert a component at a time. The other option is to create it from scratch, which I would hopefully avoid.
Another concern, is it possible that I'll somehow corrupt the application by importing the Materials-UI dependency? And would restoring from git be enough to eliminate the problem?
The main reason for doing this is I've had a difficult time trying to create a dropdown box in a form in reactstrap, despite my best efforts. Materials-UI seems to be a widely-used and supported library, with a nice set of components, including dropdown.
Related
I'm developing an app using react js. I just want to ask your opinion. Is it redundant to use MUI Component and React Bootstrap at the same time?
There's nothing stopping you from using both MUI and Bootstrap in your project but either one should be able to meet all your design requirements.
But in choosing both you would have to keep in mind two very different approaches to design. The MUI implementation varies quite a bit from React Bootstrap. Not sure what you are going for here, but in a very general sense I would stick with one for my project/purpose.
(Personally I prefer MUI)
I think both libraries are great, but generally the approach is to pick one to keep less dependencies in your package.json file. You have to keep single approach when it comes to styling for two reasons:
Consistency
Whoever reads your codebase will be able to comprehend easily.
P.S: I prefer MUI, you can customize your own design system by overriding MUI default theme
No, it's not redundant for your project. The amount of work that's been put into Material UI makes it a feasible choice for professional projects.
Also, if you are worried about libraries taking more bundle size then as per the Material UI documentation, you can reduce bundle size by importing your components in the following way: let's say you want the button component, so you import it like this import Button from '#material-ui/core/Button', instead of this import { Button } from '#material-ui/core'. With the former import you'll be importing the Button module only and leaving the rest of the modules alone. For further detail, visit this link: https://v3.material-ui.com/guides/minimizing-bundle-size/.
Hope you find this answer satisfactory!
Usually you pick one widgets library, but if you miss some components you can mix them too. According to mui documentation every component is self contained:
https://mui.com/material-ui/getting-started/usage/
If you are worried about inconsistencies in your widgets, mui now offers unstyled components as a standalone package:
https://mui.com/base/getting-started/overview/
For react-bootstrap the components can be customized in many ways, especially over global customization via sass variables:
https://react-bootstrap.github.io/getting-started/introduction/#installation
I wouldn't worry too much about dependencies as you usually have so many of them anyway and install new package for every use case.
In my current project for example I have react-bootstrap as the main UI-lib, but it has no date pickers nativly. So after a research I picked up the mui datepickers.
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.
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 have a task from UX designers to create a datepicker that displays multiple months + time.
In our project, we are currently using react-datepicker library to manage our datepickers.
This is the react component used in our project:
https://hacker0x01.github.io/react-datepicker/
The react-datepicker supports both multiple months and time.
The library itself puts the time on the right side of the calendar. However, the UX designers want the time to be at the bottom.
Is there a proper way in doing this without messing around the date-picker library itself? I know it is a big no no to mess around with the library itself, but what options do I have?
Is there a way around this?
If not, I might have to renegotiate with the UX designers.
I decided to create a reusable date range picker component from scratch. I will not be using the react-datepicker at all for this case.
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/#/