Using the Methods

JavaScript

You can call methods directly from the InfiniteGrid instance.

const ig = new MasonryInfiniteGrid("#el", options);

ig.getItems();

React

You can call methods of InfiniteGrid by getting a ref of InfiniteGrid

import * as React from "react";
import { MasonryInfiniteGrid } from "@egjs/react-infinitegrid";

export default () => {
  const igRef = React.useRef();

  React.useEffect(() => {
    console.log(igRef.current.getItems());
  }, []);
  return <MasonryInfiniteGrid ref={igRef}>
  </MasonryInfiniteGrid>
};

See React Refs and the DOM for more info.

Vue@2

You can access instance of InfiniteGrid component with the ref property.

<masonry-infinite-grid ref="igRef"></masonry-infinite-grid>

Then call methods of it like

this.$refs.igRef.getItems();

Vue@3

You can access instance of InfiniteGrid component with the ref property.

<masonry-infinite-grid ref="igRef"></masonry-infinite-grid>

Then call methods of it like

this.$refs.igRef.getItems();

Angular

There're few ways to interact with child component in Angular.
See Component Interaction page from Angular official document, and use that to interact with InfiniteGrid.

app.component.html

<div NgxMasonryInfiniteGrid
  #ig
  >
</div>

app.component.ts

import { Component, Input, AfterViewInit } from '@angular/core';

import { NgxInfiniteGridComponent } from '@egjs/ngx-infinitegrid';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterViewInit {
  @ViewChild("ig") ig!: NgxInfiniteGridComponent;
  ngAfterViewInit() {
    console.log(this.ig.getItems());
  }
}
}

Svelte

You can use bind:this syntax of svelte to get the reference of InfiniteGrid.

<script lang="ts">
  import { onMount } from "svelte";
  import { MasonryInfiniteGrid } from "@egjs/svelte-infinitegrid";

  let ig;

  onMount(() => {
    console.log(ig.getItems());
  });
</script>
<MasonryInfiniteGrid
  bind:this={ig}
>
</MasonryInfiniteGrid>

See all available methods at our API page.