react-mdl

react-mdl copied to clipboard

Anyway to replace the default hamburger icon with a custom icon? Trying to do a screen with "back" button when using a header like this stackoverflow question.

Thanks @kctang. Currently, it's not as easy as it seems to be to offer this possibility. The button is located inside the Layout component, but this is an option that should live in the Drawer component :s We can think of something for v2, but for v1 it will be hard... Unless someone has a good idea how we could do it.

I have already implemented this in my own adaptation of Drawer. And indeed it's tricky. The problem is the coupling between the components as you say:

The button is located inside the Layout component, but this is an option that should live in the Drawer component :s

The solution is the same as always in React: use props :)

What I did was hide the hamburger menu in CSS, then use a 'real' React button that know's nothing of the drawer and just calls an onClick handler when pressed. This handler than toggles some state that is later used to set the value for the open property when we render the drawer. Imho, Drawer should be a controlled component and should have just an open property to control it (I currently implemented that as a boolean, but since the drawer should be able to slide, it might actually be better if we can also set a number).

This question is actually very relevant for [v2] Rewrite Layout without mdlUpgrade #295