Reactjs – React material-ui responsive layout

material-uireactjsresponsive-design

I am trying to use material-ui in my React application. The components are great, but it doesn't seem like they were designed to be responsive. For example, I'm trying to implement the Drawer component in my home page like this:

        <div>
            <AppBar
                title="My App"
                iconClassNameRight="muidocs-icon-navigation-expand-more"
                onLeftIconButtonTouchTap={this.handleToggle}
            />
            <TextField
                hintText="Hint goes here"
                floatingLabelText="Enter your Note here..."
                multiLine={true}
                fullWidth={true}
                rows={2}
            />
            <Drawer
                docked={false}
                open={this.state.open}
                onRequestChange={(open) => this.setState({open})}
            >
                <MenuItem>One</MenuItem >
                <MenuItem>Two</MenuItem >
            </Drawer>
        </div>
    );

When I load this up on my phone, it doesn't adjust it's size as I had hoped. Is there any way to make this responsive using only material-ui? If not, is there any way I can use Bootstrap or some other package for responsiveness?

Thanks,
-Jim

New visible classes added to Bootstrap

Extra small devices Phones (<768px) (Class names : .visible-xs-block, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md-block, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

For more information : http://getbootstrap.com/css/#responsive-utilities

Below is deprecated as of v3.2.0

Extra small devices Phones (<768px) (Class names : .visible-xs, hidden-xs)

Small devices Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

Much older Bootstrap

.hidden-phone, .hidden-tablet etc. are unsupported/obsolete.

UPDATE:

In Bootstrap 4 there are 2 types of classes:

The hidden-*-up which hide the element when the viewport is at the given breakpoint or wider.
hidden-*-down which hide the element when the viewport is at the given breakpoint or smaller.

Also, the new xl viewport is added for devices that are more then 1200px width. For more information click here.

Javascript – Loop inside React JSX

Think of it like you're just calling JavaScript functions. You can't use a for loop where the arguments to a function call would go:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

See how the function tbody is being passed a for loop as an argument – leading to a syntax error.

But you can make an array, and then pass that in as an argument:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

You can basically use the same structure when working with JSX:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.

Related Solutions

Html – Hiding elements in responsive layout

New visible classes added to Bootstrap

For more information : http://getbootstrap.com/css/#responsive-utilities

Javascript – Loop inside React JSX

Related Topic