Introducing Layout for Material-UI
Material-UI is one of the most popular react component library nowadays with 40000+ star on github. However, there is no instruction or topic about how to build layout based on them. That means you have to combine Drawer, Header (AppBar), Content and Footer by yourself. If you are not a Material-UI expert, I guarantee that you will take at least 3–4 hours to complete it (with high probability that you will need to rewrite it again in the future. Believe me, I had been through that moment 😭).
So why is it take so long to start doing layout. Here is what I found.
- A little bit of intermediate & advanced CSS is required. You need to have a well understanding of how flexBox affect each other. Otherwise, you are doomed.
- Many variants for different sizes of the screen (responsive). You definitely don’t want permanent Drawer to appear in mobile screen, right?
- It seems easy, but a lot of dependent function. Ex. When Drawer is close, the Header need to reduce its width to fulfil the screen as well as the content.
Today I have a solution for you. It is not from the official but I am sure that it is gonna help you a lot. Moreover, you can be very confident on using my code because the it is just a combination of Material-ui components and a basic react context, nothing else, no other utilities.
yarn add @material-ui/coreIf you don’t care how it works, see demo now.
Tip: Use Bit to share and manage reusable components across projects, to build faster as a team. You can instantly share components between your projects, develop them anywhere, and sync changes to source code and dependencies. Here’s an example of MUI components with Bit.
How it works
It is simple. The Root component that you render (must!) will be a Provider for the layout configuration (explain later). Each child (Nav, Header, Content and Footer) subscribes to the context and behave differently based on each variable. So let’s look at each variable in the config.
What’s each config does?
There are 9 variables in config that you can set.
navVariantis the same variant as Drawer can accept. The good news is you can set it differently in each screen.
// example
const config = {
navVariant: {
xs: 'temporary', // recommended in mobile
sm: 'persistent',
md: 'permanent',
}
}
2. navWidth is the width of the navigation (white area). Again, you can set in number or as object (different in each screen).
3. navAnchor is the position of the navigation. Default is left and it is rarely changed. However, it supports responsive pattern (object) if you want to change.
4. collapsible makes navigation page able to be collapsed. the collapsed button is automatically shown if it is collapsible. it also supports responsive pattern (object).
5. collaspedWidth is the width after navigation is in collapsed state. It supports responsive pattern (object).
6. clipped bring header to the front of the screen (nav is behind the header not below). It supports responsive pattern (object) but normally it should be the same across devices.
7. headerPosition is the position of official AppBar (Header is the AppBar). It supports responsive pattern (object)
8. squeezed make Header and Content stay in the screen when navigation’s width varies which means you will see them stretch and contract (also affect children inside them because width is dynamic). It supports responsive pattern (object)
9. footerShrink. It supports responsive pattern (object)
That’s it. really? is there anything simple than this?
Good news, it is. I have provided 4 presets, so you don’t have to configure it yourself.
More good news! What?
For you who don’t like those presets. I’ve recently built a Layout Builder for you!. OMG, try it now.
Good news! layout is available in npm
yarn install mui-layoutMore features
- Header Magnet
- Auto Collapsed
Follow these links for more info
If you have any idea, just comment or tweet it @siriwatknp. I’m very happy to hear from you. Love it? in case you don’t know, you can give me 50 👏. haha, build with 💗 (a lot).
