Initialize Your Project with Material-UI Layout v1.2

siriwatknp
Bits and Pieces
Published in
3 min readJul 17, 2019

--

Today I want to announce that Material-UI Layout aka mui-layout is available in npm, so you can just npm install mui-layout and you are good to go.

TLDR

Is it different from v1.0?

A bit, yes. Some API is changed but the components are still the same. The logic behind the scene is refactored using react-hooks so it is easier to read and give a better experience to developers (a lot). Good news, new features added! let’s dive in it.

What’s new?

In this version, I tried to make it simpler for you in most use cases.

Firstly, look at this example, in the previous version if your layout has a clipped header. This is what you get.

The result when clipped is true.

I know it is so annoying that you have to add the gap at the top of the Nav. It is even worse if your Header’s position is static or relative, you will get this when scroll.

The result if after adding space to the top of Nav and Header’s position is relative

Arghhh, why it is so hard to use my own library haha. I kept asking my self if this library is going to work, it must provide the best experience to all range of developers from beginners to masters.

So, Please welcome Header Magnet!!!

In v1.2, this is what you get when your Header is clipped and its position is one of static or relative. It is built-in, so you don’t have to add any line of code to make it work.

Awesome!!! it use hooks and useMediaQuery from Official Material-UI lib, so the code is absolutely up to date. You can customise this behaviour or even disabled it.

If you want to see demo right away, click here!

Secondly, I have been using antd in my dashboard project and I think they really care about UX because when I resize the screen their Nav automatically collapsed to give me extra space to see the content. Some user might not notice it, but some who does will love it forever. So I thought it would be nice to implement this UX in this version too.

So, Please welcome Auto Collapsed!!!

You can customise it by replacing collapsedBreakpoint as string sm md(default) lg or you can disabled it if you don’t like.

Deprecated in v1.2

the menuIcon prop pass to Header is deprecated, use renderMenuIcon instead.

// v1.0
<Header
menuIcon={
active: <ActiveIcon />
inactive: <InactiveIcon />
}
> ...
// v1.2
<Header
renderMenuIcon={opened => (
opened ? <InactiveIcon /> : <ActiveIcon />
)}
> ...

also the same as Nav. the collapsedIcon prop pass to Nav is deprecated, use renderIcon instead.

// v1.0
<Nav
collapsedIcon={
active: <ActiveIcon />
inactive: <InactiveIcon />
}
> ...
// v1.2
<Nav
renderIcon={opened => (
opened ? <InactiveIcon /> : <ActiveIcon />
)}
> ...

This is what default config looks like in v1.2

Check this playground and play around.

https://codesandbox.io/s/material-ui-layout-v12-7mn9xq3nnj

Feel free to suggest, comment or even request features. just create an issue in this repo, let’s make it better.

If you like this story, give me some clap. Thanks for your time.

Built with ❤️, see you next story.

Related Tools

Learn More

--

--

Passionate in Design, Theming, React & Firebase. Focus on component reusability.