Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

React Snuggle

minzip

Lightweight React component to create css-based masonry-like layouts. Snuggle all your components really tight 🛌

Demo

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).

Features

  • 🤟 Responsive: It works on all size screens;
  • 🤙 Customizable: Easily change how your elements should snuggle;
  • 🤝 Use your favorite library: CSS-in-JS, css modules, plain css, whatever. Feel free to use whatever you want;

Install:

yarn add react-snuggle

Usage:

import Snuggle from 'react-snuggle'

const List = () => (
  <Snuggle>
    <div>Item</div>
    <div>Item</div>
    ...
  </Snuggle>
)

Options

Name Type Default
item React.Element <div />
container React.Element <div />
rowGap Number 10
columnWidth Number 250

Methods

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>
  )
}

Todo

  • Span options (element fill two columns or more);
  • Filter elements;
  • Missing tests;
  • ...

License

MIT

Kudos

@andybarefoot Masonry style layout with CSS Grid


Significa Lda

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.

You can’t perform that action at this time.