I'm trying to get Material UI's TouchRipple component to work so that I can use the ripple effect at times outside of the ButtonBase component. The docs, however, say nothing about how to use it.
In older versions of Material UI, it seems you are supposed to just wrap it around the React component but in v3, it doesn't work as it doesn't take any children.
How do you use the TouchRipple component in Material UI v3?
Update for v4 — 3 of July 2019
createRippleHandler is no more. Still, ButtonBase is the best tool for what the question is asking for.
It’s not exactly a simple utility to use.
If you have a look at ButtonBase you’ll see that there are a lot of required things to make it work.
Basically you need to manually handle the events and ask the TouchRipple to start a new ripple.
They made #material-ui/core/ButtonBase/createRippleHandler (used indeed in ButtonBase) to make their life easier.
Do not recommend. Use ButtonBase instead.
Related
I'm going to start a react project. I want a little clarification about the choice of Material UI over Reactstrap. Material UI is better than Bootstrap as mentioned in another comparison of Bootstrap vs Material UI for React?. But I'm a little confused about Reactstrap after going through Pros & Cons of Material UI and Reactstrap as shown in the below images. Or should I use both of them as per requirement in the same project?
I would like to use ready made UI components like Collapse-able Side Menu, Tables with pagination, Auto complete Select etc.
react-bootstrap is more popular than reactstrap. I will speak about react-bootstrap and Material UI.
I have more experience with Material UI. I don't even know how Material UI became that popular while it was very bad when it was released. It used inline styling and it was a nightmare to customize anything. Its performance was very poor. Still, it became very popular and it improved a lot. I used it in my latest project and the performance was great and I used its new CSS in JS solution combined with styled-components. I think it will be a bit harder to use than react-bootstrap but it has more components out of the box.
For most people, react-bootstrap would be an easier choice.
I can't tell you which one to use but I can give you some things to think about and decide yourself:
Which design do you prefer?
If you have more experience with bootstrap, go with react-bootstrap.
If you prefer sass go with react-bootstrap. If you prefer CSS in JS go with Material UI.
If react-bootstrap is missing some components you would need that exists in Material UI go with Material UI but remember that you can add other external components to your project anyway so I think this may not be a limitation.
It depends on your choices, yes, it's a little bit of complicated to customized material, but the looks and feels is outstanding, for tables and all, better to use Material-UI it has inbuilt pagination if you are not comfortable in that you can try this one it also comes inbuilt pagination and much more https://github.com/react-bootstrap-table/react-bootstrap-table2
I agree with comments about the cons referred in your question seems to be more opinions than facts; probably the only fact we can say after compare the two packages is that Material UI has some more built in components.
Once said that it's hard to take a decision without knowing the specification of your project.
Probably the best suggestion we can give you is simply use the one you are more comfortable with.
Hope this helps.
Refer to my experience, if it is an commerial/external project that needs minimal branding, and you are looking for basic reuse-able component to create Admin Portal or CMS, I prefer reactstrap/CoreUI. My main concern is Theme Overriding.
Not enough documentation about overriding material ui style, had quite a hard time to edit and test the theme setting again and again, while reactstrap/CoreUI allow you to import your own .css file, or overriding its class css. So you can simply change the textfield padding at once in css while your designer request to.
Neither material ui and reactstrap/CoreUI can fulfil your need. You may install other useful npm like react-select, multiple datetime picker, autosize textarea, or color picker. Then you try to make its style to be consistent as other Textfield. Styling a component like material ui is quite hard because of its behavior, e.g. label zoom out while focus. But Styling like reactstrap/CoreUI is much easier, you can even reuse the bootstrap classname.
If you are trying to deliver something fast & small without designer, material ui is a good choice, cover most of your use cases. If it is a long-term project and designer is watching you, I am afraid material ui is not a good choice.
Anyway, case by case.
I would say it is your Choice. But if you are good at bootstrap-4, best to go with Reactstrap which is component based library for react.
In my Company we are using Reactstrap and things go quite well. But this doesn't mean we are not using our own media queries and flexbox,styled-jsx which we obviously do.
Even though you will be using ready made Components available in Reactstrap, as you progress in the project you will have to use other libraries 'React-Final-Forms' to handle forms and form data efficiently having high performance when compared with normal forms available in ReactStrap.
Similarly you will need a library known as 'React-select' to handle drop downs, which will give me more options than normal ReactStrap select form Component.
As for now, I am doing project on Next.js and Material-UI. I was also looking for such comparison between Bootstrap(reactstrap)/Material/Ant. And I am agreed with Daniel Ricci with choosing Material-UI.
Why's that?
First of all, I have spoken with my better experienced friend (he has contributed to his own (DEVExpress) React Component Library, so he was know what he has talking about)
Project Management Side pros:
Material itself has a very useful style guidelines from Google. So it is also not about library components, but about styles / colors / design. So you could always customize yourself and create your own theme. But as for you, it will be easier to understand why you are using Roboto:400 at H3 title, and «what color I should pick as secondary?», if you decide to choose primary color.
As a result, it's much easier to find a UI/UX designer for your project. And you always know how your project should looks like.
Default react Material-UI component library is quite rich and very good described with examples. (As you may already noticed). And also there are a lot of plugin libraries components, which is ready-to-use out of the box. In my own case I was needed for a editable material react tables, and have found them in via google in 5 seconds or so. In my project tables are everything and they present the product (price comparison) so that's why I choose material myself.
You could compare component libraries via google trends or github stars, but in your own case with: Collapse-able Side Menu, Tables with pagination, Auto complete Select I would choose MaterialUI.
As for cons, visually Material Style is very populated by devs (cause it's Android's app default theme) and some people thinks that it looks a bit ugly, but I thought it couldn't be a problem because you could always customize your own theme.
And as mentioned Kleo is his original answer:
If you have the time, dedication and resources, there is really nothing wrong with mixing them together. But you just need to think about the time/cost/benifit of it. DIY to make the end user happy, even if you mix them. Totally yourself is remaking the wheel, but you can always pull in boostrap styles etc.
The Tabs API of Material UI mentions that you can provide your own ScrollButtonComponent in order to render customized scroll buttons. However there is no real clear documentation on the specific of what this ScrollButtonComponent should look like.
I have found the native implementation on the Material UI git repository, I guess this could be used to establish what is required, however that feels a little bit of a hack especially since this component is marked as 'private'.
Is there something that I'm missing on the topic, or would taking a look at the native implementation the "the way to go"?
I am looking for some recommendations on what libraries, components, approaches to use when building a fully RESPONSIVE React app today?
Should I base on hooks or old school media queries?
Maybe some better solution somewhere out there ?
I suggest using a component library, for the latest components, a responsive component library such as rsuitejs or material design components should do just fine.
Links:
https://rsuitejs.com/en/
https://material-ui.com/
Have a look at Antd or material-ui
or you can use regular CSS & style your components (my favourite way)
Like others mentioned, there are quite a few packages out there for responsive design- CSS frameworks, React component libraries, etc. It is also not hard to roll your own using flexbox and/or grid.
As far as React-centric approaches go, here is one that is pretty efficient. It assumes you are utilizing SSR.
Use Context API to create a Breakpoint Provider component. Its job is to keep track of the current breakpoint, and listen to the resize event to change state as needed. In the constructor, accept the default viewport size. This can be populated server-side by utilizing user-agent sniffing.
Use the Consumer from your Breakpoint Context to expose the current viewport size. This can be used to conditionally load components based on viewport, instead of rendering them and then hiding them with CSS with media queries. You are sending less CSS/HTML down the wire this way, spending less time processing JS and CSS, and for larger sites it can put a substantial dent in loading time. :)
I just found out a small npm package that implements a Provider and a Consumer for breakpoints. Basically the idea exposed by adamz4008:
react-socks
I tried it and it's pretty straightforward. Plus it seems the lightest weigthed option vs using something bigger as material-ui or antd (which are great but would be an overkill if you won't use their components or if you're are already using some component library with no breakpoints).
There's also a very simple tutorial on how to use it here
As a super quick "meta-example", you use its BreakpointProvider to wrap your React application component (top-most) and then inside any child component of the wrapped component, you can use the Breakpoint component to do things like:
<>
<Breakpoint small down>
<MySmallComponent />
</Breakpoint>
<Breakpoint medium up>
<MyBigComponent />
</Breakpoint>
</>
"small" is one of five custom breakpoints provided. "down" means, this, or smaller. Similar logic goes for "medium" and "up", meaning "medium sized or larger screens".
If you want to implement this yourself, you should do a provider component with a listener on the resize event. You can find plenty of examples of how to do that when you search for "responsiveness + react" on google, but here is one from this community :) (check the answer from speckledcarp)
For instance, material-ui gives you look of material design.
When you are creating a website whose design has nothing to do with material ui, is it a sensible choice to use material-ui as a ui framework?
I see ui frameworks generally have more components such as sidebar, navbar which are quite tedious to implement, so I see the benefits of using the frameworks.
But our team member who is responsible for applying the design to react components, has an opinion that ui-framework oftentimes causes more trouble to arrive at the design he's given.
Is there a way of utilizing the functionality of sophisticated components of ui-framework and yet has minimum friction customizing the style?
Maybe is there a zeroing-out all the styles of a ui-framework down to basics (I wonder if this makes sense)?
Yep it's a sensible question. It's a shame that so much work goes into the functionality of the library components, but then you're locked into the MaterialUI look and feel.
If the site hasn't been designed as a MaterialUI site (i.e. the designer hasn't strictly followed the MaterialUI design guidelines) then your team member is correct, using a MaterialUI component library is probably a bad idea. I haven't personally heard of any "zeroing out" library, and generally these libraries are very hard to customise outside of just tweaking the theme.
A better approach imo would be to use high quality standalone React components that don't impose any specific style and are easily customisable to achieve any complex parts of the app. There are good choices available:
Downshift for dropdowns/typeaheads/autocomplete
React Burger Menu for sidebars
React Tiny Popover for tooltips and popovers
React Modal for modals
Etc
A large portion of the Material-UI component code is related to implementing the Material Design looks. Though the styling is highly customizable, if you aren't aiming for a look that is at least somewhat aligned with Material Design, then you may be creating a lot of extra work for yourself if you need to significantly undo/override the default styling for most of the components.
That said, Material-UI components are structured in a manner where you may be able to leverage some of the lower-level building blocks to create your own components. For instance, InputBase and ButtonBase are building blocks used to create different types of inputs and buttons within Material-UI.
You can look at https://mui-treasury.com/ for some examples of significant customization of some Material-UI components.
Even if you don't leverage Material-UI components ("#material-ui/core"), you may still find considerable value in leveraging the #material-ui/styles and #material-ui/system packages to help with your own styling solution. And if you decide to create your own components, you can use the Material-UI source code as a useful resource on how to go about specific components.
Or is bad idea? I read something about jQuery and react don't work together is it true?
You can do, in theory. In your React render you can use normal HTML tags (ish.. JSX style) and specify bootstrap4 classes on them via className attribute instead of class. If you're just using the grid and the css helpers for position, text-align, typography then you won't come up against any big issues except more scaffolding work. But if you're using the components then you're at a big disadvantage as you'll have to manage state yourself and thus repeating work, as a trivial example the pagination control you'll have write the conditional expressions to append 'active' on className yourself, rather than just using PaginationItem and letting the component manage the active boolean, but things get much more complicated with other components. In addition you'll lose a lot of development assistance that propType validation provides.
I'd suggest you pull back and work through the https://reactjs.org/docs/hello-world.html documentation first before thinking about bootstrap, jQuery etc.. and you'll be a much better position to make a call on this. If you hit react copying and pasting and not knowing the basics you won't get far and you'll end up with a holy mess even if you do get it working. You generally don't need jQuery with react, the only time we see it is when you are using a jQuery component and then wire up/down event handlers to component state by the React lifecycle methods (where an open source react component hasn't already done so).
tl;dr - make sure you understand how react works (probably most importantly state) and the question will answer itself.