1.0.22 • Published 3 years ago
react-stone-mason v1.0.22
React Stone Mason
Responsive masonry layout engine for react.
What makes this different
Obviously, this isn't the first masonry layout component for react.
- Uses standard media queries to set column counts. Media queries are parsed and intepreted by the browser, not the component.
- Unopinionated about whats inside, with no modifications to your elements. No event handlers bound, no styles applied.
- Simple layout logic. Items are rendered by the browser in a standard inline-block flow, then the component repositions the elements vertically to consume white space between column neighbors.
live demo: https://nihlton.github.io/mason/
Installation
npm install react-stone-mason
or
yarn add react-stone-mason
Usage
const columnConfig = {
[break point]: {
query: '[CSS media query]',
columns: [number of columns],
},
...
}
<Mason columns={columnConfig}>{ children }</Mason>
break point - any name, for readability.
CSS media query - (optional) a media query string. see: Window.matchMedia()
- if a query isn't provided, the column value will be treated as the default/fallback value.
columns - number of columns to divide child elements into.
Notes:
- CSS transitions and animations on element size can foil the resizeObserver.
- The Mason component will wrap your elements in a div and apply the following CSS properties to the Mason owned divs:
- box-sizing: inherit;
- display: inline-block;
- vertical-align: top;
- width: var(--cell-width);
- Adding additional styles to these Mason controlled elements can interfer with positioning. Proceede with caution.
Basic Example
import React from 'react'
import Mason from 'react-stone-mason'
function App() {
return (
<div className="App">
<Mason columns={ default: { columns: 3 } }>{ [children] }</Mason>
</div>
);
}
export default App
Responsive Example
import React from 'react'
import Mason from 'react-stone-mason'
function App() {
const columnConfig = {
small: {
query: '(max-width: 720px)',
columns: 2
},
medium: {
query: '(min-width: calc(721px)) and (max-width: calc(1022px) )',
columns: 3
},
large: {
query: '(min-width: 1023px)',
columns: 4
}
}
return (
<div className="App">
<Mason columns={columnConfig}>{ [children] }</Mason>
</div>
)
}
export default App;
1.0.22
3 years ago
1.0.19
4 years ago
1.0.18
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.11
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago