https://github.com/hongkiulam/svelte-macy

A Svelte component which wraps macy.js https://github.com/bigbite/macy.js
https://github.com/hongkiulam/svelte-macy

component macy masonry svelte typescript

Last synced: about 1 month ago
JSON representation

A Svelte component which wraps macy.js https://github.com/bigbite/macy.js

• Host: GitHub
• URL: https://github.com/hongkiulam/svelte-macy
• Owner: hongkiulam
• License: mit
• Archived: true
• Created: 2021-05-11T19:58:10.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-11-19T15:31:47.000Z (about 2 years ago)
• Last Synced: 2024-11-14T20:47:48.622Z (about 1 month ago)
• Topics: component, macy, masonry, svelte, typescript
• Language: Svelte
• Homepage:
• Size: 145 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
### Svelte Macy

A Svelte Masonry component which wraps [macy.js](https://github.com/bigbite/macy.js)

#### Installation

```bash

npm install svelte-macy

```

#### Usage

```html

	import Macy from 'svelte-macy'; // default export

	import { Macy } from 'svelte-macy'; // named export

	
Child 1

	
Child 2

	
Child 3

	
Child 4


```

For a basic usage example, checkout the Svelte REPL demo [here](https://svelte.dev/repl/a2e9c3e155e44813888e6d7fcb8ac603)

##### 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

```js

{

    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](https://github.com/bigbite/macy.js#options)

###### `macy`

You can use the `macy` prop to gain access to the underlying macy instance and its methods.

Using Svelte's bind directive

```html

	let macy;

	function someFunction() {

		if (macy) {

			macy.recalculate();

		}

	}

	


```

Available methods are `recalculate`, `runOnImageLoad`, `remove`, `reInit`, `on`, `emit`. Full documentation can be found [here](https://github.com/bigbite/macy.js#methods)

macy.js also provides some constants that are used with its events system, namely `on` and `emit`. These are re-exported for convenience.

```html

	import { EVENTS } from 'svelte-macy';

```

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

```html

	import { Macy } from 'svelte-macy';

```

To import type definitions

```html

	import type { MacyInit, MacyInstance, MacyOptions, MacyEvents } from 'svelte-macy';

```

##### Component Type

```ts

// top level import

import type { Macy } from 'svelte-macy';

import type Macy from 'svelte-macy';

let MacyComponentType: typeof Macy;

// type import

let MacyComponentType: typeof import('svelte-macy').default;

let MacyComponentType: typeof import('svelte-macy').Macy;

```

#### SvelteKit/ SSR

Unfortunately the macy.js dependency relies on `window`/ `document` which is not available on the server. A workaround is to

only import this component on the client.

```html

	import { onMount } from "svelte";

	let MacyComponent: typeof import("svelte-macy").Macy;

	onMount(async () => {

	  MacyComponent = (await import("svelte-macy")).Macy // or .default;

	});

	let macy;

	


```

#### License

[MIT](LICENSE)