README
Svelte Macy
A Svelte Masonry component which wraps macy.js
Installation
npm install svelte-macy
Usage
<script>
import { Macy } from "svelte-macy";
</script>
<Macy>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
<div>Child 4</div>
</Macy>
For a basic usage example, checkout the Svelte REPL demo here
Props
options
Since this component is a simple wrapper for macy.js, the options are close to identical (options.container has been handled by the component so it is not exposed).
Here is a list of supported options along with their default values
{
columns: 4,
trueOrder: false,
margin: 0,
waitForImages: false,
useOwnImageLoader: false,
mobileFirst: false,
breakAt: undefined,
cancelLegacy: false,
useContainerForBreakpoints: false,
}
You can find the full documentation for these options here
macy
You can use the macy prop to gain access to the underlying macy instance and its methods.
Using Svelte's bind directive
<script>
let macy;
function someFunction() {
if (macy) {
macy.recalculate();
}
}
</script>
<Macy bind:macy={macy}>
<div />
</Macy>
Available methods are recalculate, runOnImageLoad, remove, reInit, on, emit. Full documentation can be found here
macy.js also provides some constants that are used with its events system, namely on and emit. These are re-exported for convenience.
<script>
import { EVENTS } from 'svelte-macy';
</script>
Typescript
Typescript is supported out of the box.
For the component, simply import as you would normally. This will provide typings for the component's props.
<script lang="ts">
import { Macy } from "svelte-macy";
</script>
To import type definitions
<script lang="ts">
import type {
MacyInit,
MacyInstance,
MacyOptions,
MacyEvents,
} from "svelte-macy";
</script>