score:-3
when you say you want to make the grid responsive, do you perhaps mean adding more items dynamically? if not, by default material-ui
is responsive (meaning your viewport is dynamically sized depending on the device you view on), and depending on your gridlist
properties (like cols, rows, spacing etc) you can determine the style. if you have a look at https://material-ui-next.com/demos/grid-list/ there are a few examples to get you started.
score:1
i just came across this issue and while using @morlo's answer, i did a mistake and it started showing a js error but strangely it also made it responsive! and by responsive, i mean that it shows a horizontal scrolling which is common in mobiles.
so i removed that code and used different values and cols={0} worked!
perhaps it is not documented but it works actually.
also worth mentioning some other settings that i used along:
<gridlist style={{
width: '100%',
maxheight: 320,
flexwrap: 'nowrap'
}} cols={0} cellheight={'auto'}>
...
</gridlist>
score:4
as of material-ui v4.4, you can use usemediaquery
react hook in conjunction with theme.breakpoints.up
:
import usemediaquery from '@material-ui/core/usemediaquery';
function mycomponent() {
const matches = usemediaquery(theme => theme.breakpoints.up('sm'));
return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}
⚠️ there is no default theme support, you have to inject it in a parent theme provider.
score:6
you can choose the cols
value depending on the width (xs, sm, md, lg, xl
), look at this example where 1 column is set for smaller screens.
import react from "react";
import { connect } from 'react-redux';
import proptypes from 'prop-types';
import compose from 'recompose/compose';
// @material-ui/core components
import withstyles from "@material-ui/core/styles/withstyles";
import withwidth from '@material-ui/core/withwidth';
import gridlist from '@material-ui/core/gridlist';
import gridlisttile from '@material-ui/core/gridlisttile';
import gridlisttilebar from '@material-ui/core/gridlisttilebar';
const styles = theme => ({ });
class mycomponent extends react.component {
render() {
const { classes, currentuser, images, width } = this.props;
let columns = width === 'xs' || width === 'sm' ? 1 : 2;
return (
<div classname={classes.root}>
<gridlist cellheight={180} cols={columns} classname={classes.gridlist}>
{images.map(image => (
<gridlisttile key={image.id}>
<img src={ image.path } />
<gridlisttilebar
title={ image.name }
/>
</gridlisttile>
))}
</gridlist>
</div>
);
}
}
mycomponent.proptypes = {
currentuser: proptypes.object,
images: proptypes.array.isrequired
};
function mapstatetoprops(state) {
return {
currentuser: state.user.currentuser
};
}
export default compose(
withstyles(styles, {
name: 'mycomponent',
}),
withwidth(),
connect(mapstatetoprops),
)(mycomponent);
score:34
u can use the layout breakpoints provide by mui to toggle gridlist or gridlisttile cols property. the code will look like this:
...
import withwidth, { iswidthup } from '@material-ui/core/withwidth';
...
const mycomponent = props => {
const getgridlistcols = () => {
if (iswidthup('xl', props.width)) {
return 4;
}
if (iswidthup('lg', props.width)) {
return 3;
}
if (iswidthup('md', props.width)) {
return 2;
}
return 1;
}
return(
...
<gridlist spacing={15} cellheight={400} cols={getgridlistcols()}>
{
myitemsarray.map(item => (
<gridlisttile key={item} cols={1}>
<foobar />
</gridlisttile>
))
}
</gridlist>
...
);
};
...
export default withwidth()(mycomponent);
Source: stackoverflow.com
Related Query
- How to make the GridList component in React Material-UI responsive
- How to make the whole Card component clickable in Material UI using React JS?
- how to make material data grid width to fill the parent component in react js
- How make material UI Tab component auto Scrollable in react
- How do i make my reusable react component saves when the user clicks button?
- How to make the pass a dynamic value to css class and cusmize in material UI in react
- How to make a react component call a function from another Material UI Typescript
- How to make a reusable Material UI tabs component in React
- How do I refactor this React component with a listener, to make the component functional?
- how to get the data from child component in stepper in react material ui?
- how to set the border color to Card component in React material ui
- React component setting the onClick of it's child ... how to make it work for all kinds of children
- React js. How to make a component with this structure: <Component> description of the component </Component>
- How to make this component looped in React (by counting the fat thact it receives props and does some calculation and has static titles)
- React - How to change the language of DataTable component properties of material ui?
- How to lock the position of close button with paper component of modal in material ui for responsive screen?
- How do I make a React prop only required when used in the context of a Container component with Typescript?
- How to make React page render only change component instead of the whole page?
- How to increase the size of CKEditor React component with Material UI react?
- How do I make a class component method accessible outside of the component in React and Typescript?
- how to make a dynamic text show the correct sentence in react when deleting a component (custom html element)
- How can we make sure other <ListItem> components as collapsible when one <ListItem> component get expands under <List> react material ui component?
- React : How to make the SAME component re-render?
- React : how to get input value from one component to make the ajax call in another component?
- How to make responsive my react component
- react - how to make the value of a variable remain unchanged when the component re-render
- How to make a nested react router component load to a new page and not half-way down the page
- How to make responsive content with React and Material UI?
- How to make a react class component retain its state after login and change available routes based on the state currently available in the component?
- How do I make react component rerender when the State is changed?
More Query from same tag
- Material-UI Select shows the wrong value: More explanation in the post
- how to switch component in React?
- How to remove label on hover of react icon file?
- What components to layout top level webpage like this
- How to add multiple pages with React & Redux
- React Hooks in combination with Firebase data not showing on page load
- TypeScript generics: Props with union type in React
- React useffect dependency causes infinite requests
- ESLint: to fix this, wrap the initialization of constant in its own useMemo()
- react js map function can not render the custom component
- React + Axios double POST request to spring RestController (also in fetch, seem not to be OPTIONS)
- Upload and read a file in react
- Can React selectors return jsx?
- How can we compare each element array and show the element based on the value
- Is it possible to load dynamic data on load, and children on click without setting children inside parent state?
- Material-ui: using <Divider> breaks the grid
- Can I decouple boolean state in React component
- How can I fetch arrays values in a list of items using GatsbyJS?
- expect(...).toHaveBeenCalled() fails even though the React component method is called
- useParams in React Router
- Accessing Webpack Dev Server from local network? (React Hot Reloading on mobile)
- Different alt attribute for images being filter in react
- How to write a Typescript React Component Wrapper
- Receiving data from server as json data but not able to parse the data in react
- click DOM element when component updates props
- Dynamic Routes: React/TypeScript
- React-Redux program returns "TypeError: Cannot read property 'map' of undefined"
- Test functions with Jest and Enzyme?
- React Typescript storybook implement customized Input component with onChange callBack then setState value backTo Input
- Redux: Combining reducers