Install using npm install react-grid-masonry
In a React app, use the Masonry component:
import Masonry from 'react-grid-masonry'
import faker from 'faker';
import Masonry from 'react-grid-masonry';
let styles = {
container: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
},
input: {
maxWidth: '100px',
margin: '15px auto',
padding: '5px 10px',
borderRadius: '4px',
border: '1px solid #dddddd',
},
item: {
padding: '10px',
borderRadius: '4px',
},
};
const colors = ['#D2B4DE', '#A9CCE3', '#AED6F1', '#A3E4D7', '#A2D9CE', '#A9DFBF', '#ABEBC6'];
function generateFakeData(num) {
return Array.from({ length: num }).map(() => {
let wordCount = faker.datatype.number(50);
return {
text: faker.random.words(wordCount),
color: colors[faker.datatype.number(colors?.length - 1)],
};
});
}
function Item({ data, itemIdx }) {
return (
<div style={{ ...styles.item, backgroundColor: data.color }}>
{itemIdx}:{data.text}
</div>
);
}
function App() {
const [itemsCount, setItemsCount] = React.useState(5);
const [items, setItems] = React.useState([]);
const handleInputChange = (e) => {
let value = e.target.value;
if (value > 0 && value < 200) {
setItemsCount(value);
}
};
React.useEffect(() => {
let data = generateFakeData(itemsCount);
setItems(data);
}, [itemsCount]);
return (
<div style={styles.container}>
<input
style={styles.input}
type="number"
min="0"
max="200"
step="5"
value={itemsCount}
onChange={handleInputChange}
/>
<Masonry comp={Item} uid="uuid" items={items} columnWidth={250} gutter={15} minCols={1} />
</div>
);
}
export default App;
Name | Description |
---|---|
comp | React Component |
items | Array |
columnWidth | Number |
minCols | Number |
gutter | Number |