An intimate and comfortable way to layout your components. (NOT MAINTAINED)
Lightweight React component to create css-based masonry-like layouts. Snuggle all your components really tight 🛌
Like a loving couple snuggling in bed, react-snuggle
basically tries to make everything very intimate and comfortable by filling every space available (using CSS grid and a bit of javascript).
yarn add react-snuggle
import Snuggle from 'react-snuggle'
const List = () => (
<Snuggle>
<div>Item</div>
<div>Item</div>
...
</Snuggle>
)
Name | Type | Default |
---|---|---|
item | React.Element | <div /> |
container | React.Element | <div /> |
rowGap | Number | 20 |
columnWidth | Number | 250 |
resize Recalculate all spaces available and snuggle each element z its space, it is helpful for lazing loading, resize listeners, and loading images.
Example:
const Component = () => {
const snuggleRef = useRef()
const onLoad = () => {
if (snuggleRef.current) {
snuggleRef.current.resize()
}
}
return (
<Snuggle ref={snuggleRef}>
<img src="example.jpg" onLoad={onLoad} />
</Snuggle>
)
}
@andybarefoot Masonry style layout with CSS Grid
Significa is an Oporto based digital studio founded in late 2013. Despite being specialised in Interaction Design and Brand Development, we believe that good design thinking can answer almost any question and solve most problems. We aim to provide meaningful design solutions to achieve the best user engagement possible in any situation.