https://github.com/janzheng/svelte-masonry
Masonry for Svelte
https://github.com/janzheng/svelte-masonry
Last synced: 4 months ago
JSON representation
Masonry for Svelte
- Host: GitHub
- URL: https://github.com/janzheng/svelte-masonry
- Owner: janzheng
- Created: 2020-08-14T15:47:20.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-10T23:55:06.000Z (6 months ago)
- Last Synced: 2025-02-15T15:06:48.036Z (5 months ago)
- Language: JavaScript
- Homepage: https://svelte-masonry-one.vercel.app/
- Size: 291 KB
- Stars: 30
- Watchers: 4
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-masonry
A lightweight Masonry implementation for Svelte, based on [Ana Tudor's CSS-Tricks article](https://css-tricks.com/a-lightweight-masonry-solution/). No external dependencies required.
[Demo](https://svelte-masonry.surge.sh)
Both demos can be found under `/src/routes/`
This is an implementation of Masonry based on this excellent article by Ana Tudor (@anatudor) on CSS Tricks: https://css-tricks.com/a-lightweight-masonry-solution. It's really great. It requires no external dependencies, is super light-weight, etc.
Basically I just wrapped Svelte around the Masonry code as a reusable component.
## Installation
```bash
npm install svelte-masonry
```
or
```bash
yarn add svelte-masonry
```
## Basic Usage
```svelte
import Masonry from 'svelte-masonry';
let data = [
{ name: 'Item 1', text: 'Some content...' },
{ name: 'Item 2', text: 'More content...' }
];
{#each data as item}
{item.name}
{item.text}
{/each}
```
## Component Props
- `stretchFirst` (boolean): Stretches the first item across the full width
- `gridGap` (string): Space between grid items (default: '0.5em')
- `padding` (string): Padding around the entire grid (default: '0px')
- `colWidth` (string): Column width using CSS grid values (default: 'minmax(Min(20em, 100%), 1fr)')
- `items` (array): Optional array of data items - pass this if your grid content updates dynamically
- `reset` (boolean): Trigger to force grid recalculation
## Working with Dynamic Content
### Images and Async Content
When working with images or other async content, use the `refreshLayout` binding:
An example can be found under `/src/routes/pics/+page.svelte`
```svelte
import Masonry from 'svelte-masonry';
import { onMount } from 'svelte';
let refreshLayout;
let images = [];
onMount(async () => {
images = await fetchImages();
});
{#each images as image}
{/each}
```
### Dynamic Updates (e.g., "Load More")
```svelte
import Masonry from 'svelte-masonry';
let items = [];
let refreshLayout;
async function loadMore() {
const newItems = await fetchMoreItems();
items = [...items, ...newItems];
}
Load More
{#each items as item}
{item.name}
{item.text}
{/each}
```
## Important Implementation Notes
1. **Async Content Loading**
- Always bind `refreshLayout` when working with async content
- Trigger `refreshLayout` on image load events
- Pass the `items` prop when content updates dynamically
2. **Layout Updates**
The layout automatically refreshes when:
- Window is resized
- Items array changes
- `reset` prop is triggered
- `refreshLayout()` is manually called
3. **Grid Behavior**
- Uses CSS Grid under the hood
- Automatically adjusts columns based on viewport width
- Can stretch first item full-width with `stretchFirst`
- Centers content with `justify-content: center`
## Development
You're welcome to create an issue, feature request, or a pull request and I'll take a look, but this won't be a very managed repo. Instead, please read the the CSS tricks article, check out the source code, or ask the author (@anatudor) directly about the implementation (this repo is not related to the author, but an implementation of the CSS tricks article).
## License
The code was lifted from Ana Tudor (@anatudor) from CSS tricks. They have a funny license page, so you should take a look (https://css-tricks.com/license/). Do whatever you'd like with this example!
## Deployment / Packaging
This project was built with Sveltekit Package https://svelte.dev/docs/kit/packaging / https://www.npmjs.com/package/@sveltejs/package.
To build the package, run `npm run package`. This will build the package and create a dist folder with the built files.
To publish the package, run `npm publish`. This will publish the package to the npm registry.