### Vue Quick Start Example

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/vue-infinitegrid/README.md

A basic Vue component demonstrating the usage of MasonryInfiniteGrid, including item rendering and infinite scrolling with request-append functionality.

```vue
<template>
  <masonry-infinite-grid
    class="container"
    v-bind:gap="5"
    v-on:request-append="onRequestAppend"
  >
    <div
      class="item"
      v-for="item in items"
      :key="item.key"
      :data-grid-groupkey="item.groupKey"
    >
      ...
    </div>
  </masonry-infinite-grid>
</template>
<script lang="ts">
import { MasonryInfiniteGrid } from "@egjs/vue-infinitegrid";

export default {
  components: {
    MasonryInfiniteGrid,
  },
  data() {
    return {
      items: this.getItems(0, 10),
    };
  },
  methods: {
    getItems(nextGroupKey: number, count: number) {
      const nextItems: any[] = [];

      for (let i = 0; i < count; ++i) {
        const nextKey = nextGroupKey * count + i;

        nextItems.push({ groupKey: nextGroupKey, key: nextKey });
      }
      return nextItems;
    },
    onRequestAppend(e) {
      const nextGroupKey = (+e.groupKey! || 0) + 1;

      this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
    },
  },
};
</script>
```

--------------------------------

### Project Setup for Local Development

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/ngx-infinitegrid/README.md

Install project dependencies using npm for local development.

```sh
npm install
```

--------------------------------

### Basic Masonry Infinite Grid Example

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/react-infinitegrid/README.md

A basic example demonstrating how to use the MasonryInfiniteGrid component to display items that load infinitely. It includes setup for fetching new items and rendering them.

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

function getItems(nextGroupKey: number, count: number) {
  const nextItems = [];
  const nextKey = nextGroupKey * count;

  for (let i = 0; i < count; ++i) {
    nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
  }
  return nextItems;
}

const Item = ({ num }: any) => <div className="item">...</div>;

export default function App() {
  const [items, setItems] = React.useState(() => getItems(0, 10));

  return <MasonryInfiniteGrid
    className="container"
    gap={5}
    onRequestAppend={(e) => {
      const nextGroupKey = (+e.groupKey! || 0) + 1;

      setItems([
        ...items,
        ...getItems(nextGroupKey, 10),
      ]);
    }}
  >
    {items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
  </MasonryInfiniteGrid>;
}
```

--------------------------------

### Install InfiniteGrid via npm

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/infinitegrid/README.md

Install the InfiniteGrid library using npm for your project.

```bash
npm install --save @egjs/infinitegrid
```

--------------------------------

### Install @egjs/svelte-infinitegrid

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/svelte-infinitegrid/README.md

Install the package using npm.

```sh
npm install --save @egjs/svelte-infinitegrid
```

--------------------------------

### Install egjs-infinitegrid with npm

Source: https://github.com/naver/egjs-infinitegrid/blob/master/README.md

Install the egjs-infinitegrid library using npm. This is the recommended method for most projects.

```bash
$ npm install --save @egjs/infinitegrid
```

--------------------------------

### Install @egjs/ngx-infinitegrid

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/ngx-infinitegrid/projects/ngx-infinitegrid/README.md

Install the package using npm or yarn.

```sh
npm install @egjs/ngx-infinitegrid
# Or if you're using yarn
yarn add @egjs/ngx-infinitegrid
```

--------------------------------

### Run Development Server

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/ngx-infinitegrid/README.md

Start the development server with hot-reloading for the demo application.

```sh
npm run start
```

--------------------------------

### Install @egjs/vue-infinitegrid

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/vue-infinitegrid/README.md

Install the @egjs/vue-infinitegrid package using npm.

```sh
npm install --save @egjs/vue-infinitegrid
```

--------------------------------

### Install @egjs/ngx-infinitegrid

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/ngx-infinitegrid/README.md

Install the @egjs/ngx-infinitegrid package using npm.

```sh
npm install --save @egjs/ngx-infinitegrid
```

--------------------------------

### Install Egjs InfiniteGrid Packages

Source: https://context7.com/naver/egjs-infinitegrid/llms.txt

Install the core package or framework-specific adapters via npm or yarn.

```bash
# Vanilla JS / TypeScript
npm install @egjs/infinitegrid

# React
npm install @egjs/react-infinitegrid

# Vue 2
npm install @egjs/vue-infinitegrid

# Vue 3
npm install @egjs/vue3-infinitegrid

# Angular
npm install @egjs/ngx-infinitegrid

# Svelte
npm install @egjs/svelte-infinitegrid
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/README.md

Installs all necessary dependencies for the project using Yarn.

```bash
yarn install
```

--------------------------------

### Install egjs-ngx-infinitegrid with npm

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use npm to install the InfiniteGrid package for Angular projects.

```shell
npm install @egjs/ngx-infinitegrid
```

--------------------------------

### Basic Masonry Infinite Grid Setup

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/svelte-infinitegrid/README.md

Demonstrates how to set up a MasonryInfiniteGrid component in Svelte. It includes fetching initial items and handling append requests to load more items.

```html
<script>
  import { MasonryInfiniteGrid } from "@egjs/svelte-infinitegrid";

  let items = getItems(0, 10);

  function getItems(nextGroupKey, count) {
    const nextItems = [];

    for (let i = 0; i < count; ++i) {
      const nextKey = nextGroupKey * count + i;

      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
    }
    return nextItems;
  }
</script>

<MasonryInfiniteGrid
  class="container"
  gap={5}
  {items}
  on:requestAppend={({ detail: e }) => {
    const nextGroupKey = (+e.groupKey || 0) + 1;

    items = [...items, ...getItems(nextGroupKey, 10)];
  }}
  let:visibleItems
>
  {#each visibleItems as item (item.key)}
    <div class="item">
      ...
    </div>
  {/each}
</MasonryInfiniteGrid>
```

--------------------------------

### Start Local Development Server

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/README.md

Starts a local development server that automatically refreshes the browser on code changes. This is useful for active development.

```bash
yarn start
```

--------------------------------

### Install egjs-svelte-infinitegrid with npm

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use npm to install the InfiniteGrid package for Svelte projects.

```shell
npm install @egjs/svelte-infinitegrid
```

--------------------------------

### Install egjs-ngx-infinitegrid with yarn

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use yarn to install the InfiniteGrid package for Angular projects.

```shell
yarn add @egjs/ngx-infinitegrid
```

--------------------------------

### Vue InfiniteGrid Script Setup and Methods

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code3/VueCode.txt

Sets up the Vue component, imports the InfiniteGrid class, initializes data, and defines methods for generating items and handling append/prepend requests with virtual scrolling.

```javascript
import { #ClassName } from "@egjs/vue-infinitegrid";

export default {
  components: {
    #ClassName,
  },
  data() {
    return {
      items: this.getItems(0, 10),
    };
  },
  methods: {
    getItems(nextGroupKey: number, count: number) {
      const nextItems: any[] = [];

      for (let i = 0; i < count; ++i) {
        const nextKey = nextGroupKey * count + i;

        nextItems.push({ groupKey: nextGroupKey, key: nextKey });
      }
      return nextItems;
    },
    onRequestPrepend(e: OnRequestPrepend) {
    if (e.isVirtual) {
      e.wait();
      setTimeout(() => {
        e.ready();
        this.items = [
          ...e.nextGroupKeys.map(key => this.getItems(key, 10)).flat(),
          ...this.items,
        ];
      }, 200);
    }
  },
  onRequestAppend(e: OnRequestAppend) {
    if (e.isVirtual) {
      e.wait();
      setTimeout(() => {
        e.ready();
        this.items = [
          ...this.items,
          ...e.nextGroupKeys.map(key => this.getItems(key, 10)).flat(),
        ];
      }, 200);
    }
  },
};
</script>
```

--------------------------------

### Initialize InfiniteGrid and Render Items

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/infinitegrid/test/manual/status.html

Initializes a MasonryInfiniteGrid with specified options and renders the initial items. This is the setup for the grid functionality.

```javascript
const itemCount = 10;
function getItems(nextGroupKey, count) {
    const nextItems = [];
    for (let i = 0; i < count; ++i) {
        const num = nextGroupKey * count + i;
        nextItems.push({
            groupKey: nextGroupKey,
            key: num,
            html: `<div class="item"> <div class="thumbnail"> <a href="https://naver.com"><img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" /></a> </div> <div class="info">egjs ${num}</div> </div>`,
        });
    }
    return nextItems;
}
let ig;
function init() {
    ig?.syncItems([]);
    ig?.destroy();
    ig = new InfiniteGrid.MasonryInfiniteGrid(".container", {
        container: false,
        useFit: true,
        useRecycle: true,
        horizontal: false,
        useResizeObserver: true,
        gap: 5,
    });
    ig.on("requestPrepend", e => {
        console.log("REQP", e);
        if (e.isVirtual) {
            const nextGroupKeys = e.nextGroupKeys;
            nextGroupKeys.slice(0, 1).forEach(nextGroupKey => {
                ig.prepend(getItems(nextGroupKey, 10), nextGroupKey);
            });
        }
    });
    ig.on("requestAppend", e => {
        console.log("REQA", e);
        if (!e.isVirtual) {
            const nextGroupKey = (+e.groupKey || 0) + 1;
            ig.append(getItems(nextGroupKey, 10), nextGroupKey);
        }
    });
}
function render() {
    // ig.setPlaceholder({ html: 
bind<div class="placeholder">Placeholder</div>
bind })
    ig.renderItems();
}
function restore() {
    const status = JSON.parse(sessionStorage.getItem("status"));
    init();
    ig.setStatus(status);
}
function save() {
    sessionStorage.setItem("status", JSON.stringify(ig.getStatus(InfiniteGrid.STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS, true)));
}
init();
render();
```

--------------------------------

### Install egjs-vue3-infinitegrid with npm

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use npm to install the InfiniteGrid package for Vue 3 projects.

```shell
npm install @egjs/vue3-infinitegrid
```

--------------------------------

### Install egjs-react-infinitegrid with npm

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use npm to install the InfiniteGrid package specifically for React projects.

```shell
npm install @egjs/react-infinitegrid
```

--------------------------------

### Install egjs-infinitegrid with yarn

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use yarn to install the core InfiniteGrid package for JavaScript projects.

```shell
yarn add @egjs/infinitegrid
```

--------------------------------

### Install egjs-svelte-infinitegrid with yarn

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use yarn to install the InfiniteGrid package for Svelte projects.

```shell
yarn add @egjs/svelte-infinitegrid
```

--------------------------------

### Install egjs-vue-infinitegrid with npm

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use npm to install the InfiniteGrid package for Vue 2 projects.

```shell
npm install @egjs/vue-infinitegrid
```

--------------------------------

### Install egjs-vue3-infinitegrid with yarn

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use yarn to install the InfiniteGrid package for Vue 3 projects.

```shell
yarn add @egjs/vue3-infinitegrid
```

--------------------------------

### Install egjs-react-infinitegrid with yarn

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use yarn to install the InfiniteGrid package specifically for React projects.

```shell
yarn add @egjs/react-infinitegrid
```

--------------------------------

### Install egjs-vue-infinitegrid with yarn

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/installation.mdx

Use yarn to install the InfiniteGrid package for Vue 2 projects.

```shell
yarn add @egjs/vue-infinitegrid
```

--------------------------------

### Svelte InfiniteGrid with Virtual Scrolling

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code3/SvelteCode.txt

Demonstrates the basic setup of Svelte InfiniteGrid using virtual scrolling. It includes importing necessary components and defining item data structure.

```svelte
<script>
  import { #ClassName } from "@egjs/svelte-infinitegrid";
  import { ITEM_TYPE } from "@egjs/infinitegrid";

  let items = getItems(0, 10);

  function getItems(nextGroupKey, count) {
    const nextItems = [];

    for (let i = 0; i < count; ++i) {
      const nextKey = nextGroupKey * count + i;

      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
    }
    return nextItems;
  }
</script>

<#ClassName
  class="container"
#Options
  {items}
  usePlaceholder={true}
  on:requestPrepend={({ detail: e }) => {
      if (e.isVirtual) {
        e.wait();
        setTimeout(() => {
          e.ready();
          items = [
            ...e.nextGroupKeys.map(key => getItems(key, 10)).flat(),
            ...items,
          ];
        }, 200);
      }
    }}
    on:requestAppend={({ detail: e }) => {
      if (e.isVirtual) {
        e.wait();
        setTimeout(() => {
          e.ready();
          items =[
            ...items,
            ...e.nextGroupKeys.map(key => getItems(key, 10)).flat(),
          ];
        }, 200);
      }
    }}
  let:visibleItems
>
  {#each visibleItems as item (item.key)}
    {#if item.type === ITEM_TYPE.NORMAL}
      <div class="item">
        <div class="thumbnail">
          <img
            src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
              (item.key % 33) + 1
            }.jpg`}
            alt="egjs" #Maintained
          />
        </div>
        <div class="info">{`egjs ${item.key}`}</div>
      </div>
    {:else if item.type === ITEM_TYPE.VIRTUAL}
      <div class="placeholder" />
    {/if}
  {/each}
</#ClassName>
```

--------------------------------

### MasonryInfiniteGrid Default Usage

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/pages/Guides.mdx

Demonstrates the basic setup for a MasonryInfiniteGrid. No specific imports are required beyond the component itself.

```jsx
<MasonryInfiniteGrid />
```

--------------------------------

### React InfiniteGrid Basic Usage

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code2/ReactCode.txt

Demonstrates the basic setup of the InfiniteGrid component in React. It includes importing necessary modules, defining item structure, and handling state for items. Use this for initializing a virtualized list.

```jsx
import * as React from "react";
import { #ClassName } from "@egjs/react-infinitegrid";

function getItems(nextGroupKey: number, count: number) {
  const nextItems = [];
  const nextKey = nextGroupKey * count;

  for (let i = 0; i < count; ++i) {
    nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
  }
  return nextItems;
}

const Item = ({ num }: any) => <div className="item" style={{
  width: "250px",
}}>
  <div className="thumbnail">
    <img
      src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`}
      alt="egjs" #Maintained
    />
  </div>
  <div className="info">{`egjs ${num}`}</div>
</div>;

export default function App() {
  const [items, setItems] = React.useState(() => getItems(0, 10));

  return <#ClassName
    className="container"
#Options
    placeholder={<div className="placeholder"></div>}
    onRequestPrepend={(e) => {
      if (e.isVirtual) {
        e.wait();
        setTimeout(() => {
          e.ready();
          setItems([
            ...getItems(e.nextGroupKey, 10),
            ...items,
          ]);
        }, 200);
      }
    }}
    onRequestAppend={(e) => {
      if (e.isVirtual) {
        e.wait();
        setTimeout(() => {
          e.ready();
          setItems([
            ...items,
            ...getItems(e.nextGroupKey, 10),
          ]);
        }, 200);
      }
    }}
  >
    {items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
  </#ClassName>;
}
```

--------------------------------

### Initialize InfiniteGrid with Content Alignment

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/infinitegrid/test/manual/contentAlign.html

Initializes a MasonryInfiniteGrid instance with `contentAlign` set to 'start'. This option controls how content is aligned within the grid. Other options like `scrollContainer`, `useFit`, `useRecycle`, `horizontal`, and `gap` are also configured.

```javascript
const ig = new InfiniteGrid.MasonryInfiniteGrid(".container", {
  scrollContainer: ".scroller",
  useFit: true,
  useRecycle: true,
  horizontal: false,
  useResizeObserver: true,
  contentAlign: "start",
  gap: 5,
});
```

--------------------------------

### CSS Transition Example

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/pages/Guides.mdx

Apply CSS transitions to the '.item' class to create smooth visual effects when items change position or appearance within the InfiniteGrid.

```css
.item {
  transition: all ease 0.2s;
}
```

--------------------------------

### React InfiniteGrid Basic Usage

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code1/ReactCode.txt

Demonstrates the basic setup of InfiniteGrid in React, including item rendering and handling append requests to load more data.

```jsx
import * as React from "react";
import { #ClassName } from "@egjs/react-infinitegrid";

function getItems(nextGroupKey: number, count: number) {
  const nextItems = [];
  const nextKey = nextGroupKey * count;

  for (let i = 0; i < count; ++i) {
    nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
  }
  return nextItems;
}

const Item = ({ num }: any) => <div className="item" style={{
  width: "250px",
}}>
  <div className="thumbnail">
    <img
      src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`}
      alt="egjs" #Maintained
    />
  </div>
  <div className="info">{`egjs ${num}`}</div>
</div>;

export default function App() {
  const [items, setItems] = React.useState(() => getItems(0, 10));

  return <#ClassName
    className="container"
#Options
    onRequestAppend={(e) => {
      const nextGroupKey = (+e.groupKey! || 0) + 1;

      setItems([
        ...items,
        ...getItems(nextGroupKey, 10),
      ]);
    }}
  >
    {items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
  </#ClassName>;
}
```

--------------------------------

### Vue 3 Infinite Grid Quick Start

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/vue3-infinitegrid/README.md

Demonstrates how to use the MasonryInfiniteGrid component in a Vue 3 application. It includes setting up the grid, defining items, and handling the request-append event to load more items.

```vue
<template>
  <masonry-infinite-grid
    class="container"
    v-bind:gap="5"
    v-on:request-append="onRequestAppend"
  >
    <div
      class="item"
      v-for="item in items"
      :key="item.key"
      :data-grid-groupkey="item.groupKey"
    >
      ...
    </div>
  </masonry-infinite-grid>
</template>
<script lang="ts">
import { MasonryInfiniteGrid } from "@egjs/vue3-infinitegrid";

export default {
  components: {
    MasonryInfiniteGrid,
  },
  data() {
    return {
      items: this.getItems(0, 10),
    };
  },
  methods: {
    getItems(nextGroupKey: number, count: number) {
      const nextItems: any[] = [];

      for (let i = 0; i < count; ++i) {
        const nextKey = nextGroupKey * count + i;

        nextItems.push({ groupKey: nextGroupKey, key: nextKey });
      }
      return nextItems;
    },
    onRequestAppend(e) {
      const nextGroupKey = (+e.groupKey! || 0) + 1;

      this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
    },
  },
};
</script>
```

--------------------------------

### Vue InfiniteGrid Basic Usage

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code1/VueCode.txt

Demonstrates the basic setup of the InfiniteGrid component in a Vue template, including item rendering and event handling for appending new items. Ensure the component is imported and registered.

```vue
<template>
  <#DeClassName
    class="container"
#Options
    v-on:request-append="onRequestAppend"
  >
    <div
      class="item"
      v-for="item in items"
      :key="item.key"
      :data-grid-groupkey="item.groupKey"
    >
      <div class="thumbnail">
        <img
          v-bind:src="
            'https://naver.github.io/egjs-infinitegrid/assets/image/' +
            ((item.key % 33) + 1) +
            '.jpg'
          "
          alt="egjs" #Maintained
        />
      </div>
      <div class="info">egjs {{ item.key }}</div>
    </div>
  </#DeClassName>
</template>
<script lang="ts">
import { #ClassName } from "@egjs/vue-infinitegrid";

export default {
  components: {
    #ClassName,
  },
  data() {
    return {
      items: this.getItems(0, 10),
    };
  },
  methods: {
    getItems(nextGroupKey: number, count: number) {
      const nextItems: any[] = [];

      for (let i = 0; i < count; ++i) {
        const nextKey = nextGroupKey * count + i;

        nextItems.push({ groupKey: nextGroupKey, key: nextKey });
      }
      return nextItems;
    },
    onRequestAppend(e) {
      const nextGroupKey = (+e.groupKey! || 0) + 1;

      this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
    },
  },
};
</script>

```

--------------------------------

### Svelte InfiniteGrid with Virtual Scrolling

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code2/SvelteCode.txt

This snippet shows the basic setup of Svelte InfiniteGrid, including importing necessary components and defining item data. It configures the grid for virtual scrolling and handles request events for appending and prepending items.

```svelte
<script>
  import { #ClassName } from "@egjs/svelte-infinitegrid";
  import { ITEM_TYPE } from "@egjs/infinitegrid";

  let items = getItems(0, 10);

  function getItems(nextGroupKey, count) {
    const nextItems = [];

    for (let i = 0; i < count; ++i) {
      const nextKey = nextGroupKey * count + i;

      nextItems.push({ groupKey: nextGroupKey, key: nextKey });
    }
    return nextItems;
  }
</script>

<#ClassName
  class="container"
#Options
  {items}
  usePlaceholder={true}
  on:requestPrepend={({ detail: e }) => {
      if (e.isVirtual) {
        e.wait();
        setTimeout(() => {
          e.ready();
          items = [
            ...getItems(e.nextGroupKey, 10),
            ...items,
          ];
        }, 200);
      }
    }}
    on:requestAppend={({ detail: e }) => {
      if (e.isVirtual) {
        e.wait();
        setTimeout(() => {
          e.ready();
          items =[
            ...items,
            ...getItems(e.nextGroupKey, 10),
          ];
        }, 200);
      }
    }}
  let:visibleItems
>
  {#each visibleItems as item (item.key)}
    {#if item.type === ITEM_TYPE.NORMAL}
      <div class="item">
        <div class="thumbnail">
          <img
            src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
              (item.key % 33) + 1
            }.jpg`}
            alt="egjs" #Maintained
          />
        </div>
        <div class="info">{`egjs ${item.key}`}</div>
      </div>
    {:else if item.type === ITEM_TYPE.VIRTUAL}
      <div class="placeholder" />
    {/if}
  {/each}
</#ClassName>
```

--------------------------------

### Cursor Management: setCursors, getStartCursor, getEndCursor

Source: https://context7.com/naver/egjs-infinitegrid/llms.txt

Manually control which range of groups is currently visible, enabling programmatic virtual scrolling. You can get the start and end cursors of visible groups and set them to navigate or control the view.

```APIDOC
## setCursors / getStartCursor / getEndCursor

Manually control which range of groups is currently visible, enabling programmatic virtual scrolling.

```js
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const ig = new MasonryInfiniteGrid(".container", { gap: 5, useRecycle: true });
ig.renderItems();

ig.on("renderComplete", () => {
  const start = ig.getStartCursor(); // index of first visible group
  const end   = ig.getEndCursor();   // index of last visible group
  console.log(`Visible groups: ${start} – ${end}`);
});

// Jump directly to groups 2-5 (e.g., for programmatic navigation)
ig.setCursors(2, 5);

// Mark that the first render already happened (skip initial animation)
ig.setCursors(0, 3, /* useFirstRender */ true);
```
```

--------------------------------

### Svelte MasonryInfiniteGrid Integration

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/quick-start.mdx

Implement a MasonryInfiniteGrid in your Svelte application. Import the component, define reactive variables for items, and handle the requestAppend event to dynamically load more content. This example demonstrates basic setup and item rendering.

```jsx
import { MasonryInfiniteGrid } from "@egjs/svelte-infinitegrid";

let items = [];
<MasonryInfiniteGrid
  class="container"
  gap={5}
  {items}
  on:requestAppend={({ detail: e }) => {
    const nextGroupKey = (e.groupKey || 0) + 1;
    const length = items.length;

    items = [
      ...items,
      { groupKey: nextGroupKey, key: length },
      { groupKey: nextGroupKey, key: length + 1 },
      { groupKey: nextGroupKey, key: length + 2 },
    ];
  }}
  let:visibleItems
>
   {#each visibleItems as item (item.key)}
    <div class="item">
     {item.data.key}
    </div>
  {/each}
</MasonryInfiniteGrid>
```

--------------------------------

### Initialize InfiniteGrid and Append Items

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code1/JSCode.txt

Demonstrates how to initialize InfiniteGrid with a container and options, and how to append new items upon a request.

```javascript
import { #ClassName } from "@egjs/infinitegrid";

function getItems(nextGroupKey, count) {
  const nextItems = [];

  for (let i = 0; i < count; ++i) {
    const num = nextGroupKey * count + i;
    nextItems.push(`<div class="item">
  <div class="thumbnail">
      <img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" #Maintained/>
  </div>
  <div class="info">egjs ${num}</div>
</div>`);
  }
  return nextItems;
}
const ig = new #ClassName(".container", {
#Options
});

ig.on("requestAppend", (e) => {
  const nextGroupKey = (+e.groupKey || 0) + 1;

  ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();

```

--------------------------------

### Angular NgxMasonryInfiniteGrid Setup

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/quick-start.mdx

Integrate NgxMasonryInfiniteGrid into your Angular application by including the component in your HTML template and defining its properties and event handlers in your component's TypeScript file. This example shows how to set up items, grouping, and append requests.

```html
<div NgxMasonryInfiniteGrid
  [items]="items"
  [trackBy]="trackBy"
  [groupBy]="groupBy"
  [gap]="5"
  (requestAppend)="onRequestAppend($event)"
  #ig
  >
  <div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
    {{item.data.key}}
  </div>
</div>
```

--------------------------------

### Get and Set Grid Status

Source: https://context7.com/naver/egjs-infinitegrid/llms.txt

Serialize the grid's layout state using `getStatus` and restore it later with `setStatus`. This is useful for persisting state across page reloads, for example, using `sessionStorage`. `STATUS_TYPE` options allow controlling the level of detail saved.

```javascript
import { MasonryInfiniteGrid, STATUS_TYPE } from "@egjs/infinitegrid";

const ig = new MasonryInfiniteGrid(".container", { gap: 5 });

// Save: capture current layout state
const status = ig.getStatus(STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS);
// STATUS_TYPE options:
//   NOT_REMOVE               – all items (default)
//   REMOVE_INVISIBLE_ITEMS   – visible items only
//   MINIMIZE_INVISIBLE_ITEMS – visible + compressed invisible
//   MINIMIZE_INVISIBLE_GROUPS – visible + only outlines for invisible groups
sessionStorage.setItem("igStatus", JSON.stringify(status));

// Restore on next page load:
const saved = sessionStorage.getItem("igStatus");
if (saved) {
  // setStatus(status, useFirstRender)
  // useFirstRender=true skips re-measuring already-known sizes
  ig.setStatus(JSON.parse(saved), true);
} else {
  ig.renderItems();
}
```

--------------------------------

### Local Development Commands

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/ngx-infinitegrid/projects/ngx-infinitegrid/README.md

Commands for setting up the project, running the demo with hot-reloading, building for production, running tests, and linting files.

```sh
npm install

npm run start

npm run build

npm run test

npm run lint
```

--------------------------------

### Initialize InfiniteGrid with Items and Event Handlers

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code3/JSCode.txt

Demonstrates initializing InfiniteGrid with a container, setting placeholder HTML, and handling 'requestPrepend' and 'requestAppend' events for virtual scrolling. Use this for dynamic content loading.

```javascript
import { #ClassName } from "@egjs/infinitegrid";

function getItems(nextGroupKey, count) {
  const nextItems = [];

  for (let i = 0; i < count; ++i) {
    const num = nextGroupKey * count + i;
    nextItems.push({
      groupKey: nextGroupKey,
      key: num,
      html: `<div class="item">
  <div class="thumbnail">
      <img src="https://naver.github.io/egjs-infinitegrid/assets/image(${(num % 33) + 1}).jpg" alt="egjs" #Maintained/>
  </div>
  <div class="info">egjs ${num}</div>
</div>`,
    });
  }
  return nextItems;
}
const ig = new #ClassName(".container", {
#Options
});

ig.setPlaceholder({
  html: `<div class="placeholder"></div>`,
});


ig.on("requestPrepend", e => {
  if (e.isVirtual) {
    e.wait();
    setTimeout(() => {
      e.ready();
      ig.prepend(e.nextGroupKeys.map(key => getItems(key, 10)).flat());
    }, 200);
  }
});
ig.on("requestAppend", e => {
  if (e.isVirtual) {
    e.wait();
    e.currentTarget.appendPlaceholders(5, nextGroupKey);
    setTimeout(() => {
      e.ready();
      ig.append(e.nextGroupKeys.map(key => getItems(key, 10)).flat());
    }, 200);
  }
});
ig.renderItems();

```

--------------------------------

### Constructor

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/Grid.mdx

Initializes a new Grid instance with a container element and options.

```APIDOC
## constructor
```ts
new Grid(containerElement, options)
```

### Parameters
#### Parameters
- **containerElement** (HTMLElement | string) - Required - A base element for a module
- **options** (Partial<Options>) - Optional - The option object of the Grid module
```

--------------------------------

### Initialize InfiniteGrid with Event Handlers

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/component/code/code2/JSCode.txt

Demonstrates initializing InfiniteGrid with a container, setting a placeholder, and handling 'requestPrepend' and 'requestAppend' events for virtual scrolling. Use this for dynamic content loading.

```javascript
import { #ClassName } from "@egjs/infinitegrid";

function getItems(nextGroupKey, count) {
  const nextItems = [];

  for (let i = 0; i < count; ++i) {
    const num = nextGroupKey * count + i;
    nextItems.push(`<div class="item">
  <div class="thumbnail">
      <img src="https://naver.github.io/egjs-infinitegrid/assets/image(${(num % 33) + 1}).jpg" alt="egjs" #Maintained/>
  </div>
  <div class="info">egjs ${num}</div>
</div>`);
  }
  return nextItems;
}
const ig = new #ClassName(".container", {
#Options
});

ig.setPlaceholder({
  html: `<div class="placeholder"></div>`,
});


ig.on("requestPrepend", e => {
  if (e.isVirtual) {
    e.wait();
    setTimeout(() => {
      e.ready();
      ig.prepend(getItems(nextGroupKey, 10), nextGroupKey);
    }, 200);
  }
});
ig.on("requestAppend", e => {
  if (e.isVirtual) {
    e.wait();
    e.currentTarget.appendPlaceholders(5, nextGroupKey);
    setTimeout(() => {
      e.ready();
      ig.append(getItems(nextGroupKey, 10), nextGroupKey);
    }, 200);
  }
});
ig.renderItems();

```

--------------------------------

### Build for Production

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/ngx-infinitegrid/README.md

Compile and minify the project for production deployment.

```sh
npm run build
```

--------------------------------

### Initialize MasonryInfiniteGrid with Options

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/infinitegrid/test/manual/masonrygrid.html

Initializes a MasonryInfiniteGrid instance with various configuration options. Use this for setting up the grid, defining scroll behavior, and enabling optimizations like fitting and recycling.

```javascript
const ig = new InfiniteGrid.MasonryInfiniteGrid(".container", {
  scrollContainer: ".scroller",
  useFit: true,
  useRecycle: true,
  horizontal: false,
  useResizeObserver: true,
  gap: 5,
});
```

--------------------------------

### Initialize Infinite Grid with CDN

Source: https://github.com/naver/egjs-infinitegrid/blob/master/README.md

Initialize the MasonryInfiniteGrid using the global `InfiniteGrid` object after including it via CDN.

```javascript
var ig = new InfiniteGrid.MasonryInfiniteGrid(".container", { gap: 5 });
```

--------------------------------

### constructor

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/MasonryInfiniteGrid.mdx

Initializes a new instance of MasonryInfiniteGrid.

```APIDOC
## constructor
```ts
new MasonryInfiniteGrid(container, options)
```

### Parameters
- **container** (HTMLElement | string) - The base element for the module.
- **options** ([MasonryInfiniteGridOptions](MasonryInfiniteGridOptions)) - The option object of the MasonryInfiniteGrid module.
```

--------------------------------

### Get Status (JavaScript)

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/pages/Guides.mdx

Get the current status of the InfiniteGrid instance. This is useful for saving the state before navigating away from a page.

```js
const status = ig.getStatus();
```

--------------------------------

### Item and Group Inspection: getItems, getVisibleItems, getRenderingItems, getGroups, getVisibleGroups

Source: https://context7.com/naver/egjs-infinitegrid/llms.txt

Inspect the current state of items and groups within the grid. `getItems` retrieves all items, `getVisibleItems` gets only those in the viewport, `getRenderingItems` gets items currently being rendered, `getGroups` retrieves all groups, and `getVisibleGroups` gets only the visible ones.

```APIDOC
## getItems / getVisibleItems / getRenderingItems / getGroups / getVisibleGroups

Inspect the current state of items and groups in the grid.

```js
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const ig = new MasonryInfiniteGrid(".container", { gap: 5 });
ig.renderItems();

ig.on("renderComplete", () => {
  // All items ever added (including recycled/off-screen ones)
  const allItems = ig.getItems();
  console.log("Total items:", allItems.length);

  // Only items currently visible in the viewport
  const visibleItems = ig.getVisibleItems();
  console.log("Visible items:", visibleItems.length);

  // Items currently being rendered (may differ during transitions)
  const renderingItems = ig.getRenderingItems();

  // All groups (each group = one append/prepend call)
  const allGroups = ig.getGroups();
  console.log("Groups:", allGroups.map(g => g.groupKey));

  // Visible groups only
  const visibleGroups = ig.getVisibleGroups();
  console.log("Visible groups:", visibleGroups.map(g => g.groupKey));
});
```
```

--------------------------------

### Initialize InfiniteGrid Instance

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/quick-start.mdx

Initialize the InfiniteGrid instance with JavaScript, configure options, and set up the requestAppend event handler for dynamic content loading.

```js
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const ig = new MasonryInfiniteGrid(".wrapper", {
  align: "center",
  gap: 5,
});

ig.on("requestAppend", e => {
  const nextGroupKey = (e.groupKey || 0) + 1;
  const length = items.length;

  ig.append([
    `<div class="item">${length}</div>`,
    `<div class="item">${length + 1}</div>`,
    `<div class="item">${length + 2}</div>`,
  ], nextGroupKey);
});
ig.renderItems();
```

--------------------------------

### constructor

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/InfiniteGrid.mdx

Initializes a new instance of InfiniteGrid. It takes a wrapper element or selector and an options object to configure the grid.

```APIDOC
## constructor

### Description
Initializes a new instance of InfiniteGrid. It takes a wrapper element or selector and an options object to configure the grid.

### Parameters
#### Path Parameters
- **wrapper** (HTMLElement | string) - Required - A base element for a module.
- **options** (Options) - Required - The option object of the InfiniteGrid module.

### Request Example
```html
<ul id="grid">
  <li class="card">
    <div>test1</div>
  </li>
  <li class="card">
    <div>test2</div>
  </li>
</ul>
<script>
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
var some = new MasonryInfiniteGrid("#grid").on("renderComplete", function(e) {
  // ...
});
// If you already have items in the container, call "layout" method.
some.renderItems();
</script>
```
```

--------------------------------

### Get Status (Svelte)

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/pages/Guides.mdx

Get the current status of the MasonryInfiniteGrid component in Svelte. This is used to save the component's state, typically before a page navigation.

```html
let ig;

ig.getStatus();
```

```jsx
<MasonryInfiniteGrid
  bind:this={ig}>
</MasonryInfiniteGrid>
```

--------------------------------

### Initialize InfiniteGrid with Stretch Layout

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/infinitegrid/test/manual/stretch.html

Initializes a MasonryInfiniteGrid with stretch alignment and a maximum stretch column size. Use this to make items fill available space.

```javascript
const itemCount = 10;
function getItems(nextGroupKey, count) {
    const nextItems = [];
    for (let i = 0; i < count; ++i) {
        const num = nextGroupKey * count + i;
        nextItems.push(`<div class="item"> <div class="thumbnail"> <img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" /> </div> <div class="info">egjs ${num}</div> </div>`);
    }
    return nextItems;
}

const ig = new InfiniteGrid.MasonryInfiniteGrid(".container", {
    container: false,
    useFit: true,
    useRecycle: true,
    horizontal: false,
    // useResizeObserver: true,
    // observeChildren: true,
    align: "stretch",
    maxStretchColumnSize: 400,
    gap: 5,
});
ig.setPlaceholder({
    html: `<div class="placeholder">Placeholder</div>`
})
ig.on("requestAppend", e => {
    if (e.isVirtual) {
        console.log("placeholder");
        ig.append(getItems(e.nextGroupKey, 10), e.nextGroupKey);
    } else {
        const nextGroupKey = (+e.groupKey || 0) + 1;
        ig.append(getItems(nextGroupKey, 10), nextGroupKey);
    }
});
ig.renderItems();
```

--------------------------------

### Get Status (Angular)

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/pages/Guides.mdx

Get the current status of the NgxMasonryInfiniteGrid component in Angular. This is used to save the component's state before potential page navigation.

```html
<div NgxMasonryInfiniteGrid #ig>
  ...
</div>
```

```js
import { Component, Input, AfterViewInit } from '@angular/core';
import { NgxInfiniteGridComponent } from '@egjs/ngx-infinitegrid';

class App {
  @ViewChild("ig") ig!: NgxInfiniteGridComponent;
  getStatus() {
    this.ig.getStatus();
  }
}
```

--------------------------------

### Get Status (React)

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/pages/Guides.mdx

Get the current status of the InfiniteGrid component in a React application using a ref. This allows for saving the component's state.

```jsx
const igRef = React.useRef();


igRef.current.getStatus();

<MasonryInfiniteGrid
  ref={igRef}>...</MasonryInfiniteGrid>
```

--------------------------------

### Build Project for Production

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/README.md

Generates static content for the website into the 'build' directory. This output can be hosted on any static content hosting service.

```bash
yarn build
```

--------------------------------

### Get Status (Vue 2/3)

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/src/pages/Guides.mdx

Get the current status of the InfiniteGrid component in Vue using a ref. This is part of the process to save the component's state.

```html
<masonry-infinite-grid ref="ig">
  ...
</masonry-infinite-grid>
```

```jsx
this.$refs.ig.getStatus();
```

--------------------------------

### Initialize MasonryInfiniteGrid in JavaScript

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/migration-from-v3.mdx

Initialize MasonryInfiniteGrid with attributePrefix and column options.

```javascript
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const ig = new MasonryInfiniteGrid(".container", {
  attributePrefix: "data-grid-",
  column: 5,
});

ig.renderItems();
```

--------------------------------

### Run Tests

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/ngx-infinitegrid/README.md

Execute the project's test suite.

```sh
npm run test
```

--------------------------------

### getOutlines

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/Grid.mdx

Returns the outlines of the start and end of the Grid.

```APIDOC
## getOutlines

### Description
Returns the outlines of the start and end of the Grid.

### Method
Not applicable (method of a class)

### Endpoint
Not applicable (method of a class)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Returns
- GridOutlines: The outlines of the grid.

```

--------------------------------

### prependPlaceholders

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/PackingInfiniteGrid.mdx

Adds placeholders at the start of the grid. Inherited method.

```APIDOC
## prependPlaceholders

### Description
Add the placeholder at the start.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
| PARAMETER  | TYPE                                | OPTIONAL | DEFAULT | DESCRIPTION                                                                 |
| :--------: | :---------------------------------- | :------: | :-----: | :-------------------------------------------------------------------------- |
| items      | number &#124; InfiniteGridItemStatus[] |          |         | Items that correspond to placeholders. If it is a number, it duplicates the number of copies. |
| groupKey   | string &#124; number                | ✔️       |         | The group key to be configured in items. It is automatically generated by default. |

### Returns
[InsertedPlaceholdersResult](InsertedPlaceholdersResult)
```

--------------------------------

### Initialize InfiniteGrid with container option

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/migration-from-v3.mdx

Initialize InfiniteGrid with the 'container' option set to true.

```javascript
const ig = new InfiniteGrid(".container", {
  container: true,
});
```

--------------------------------

### removePlaceholders

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/FrameInfiniteGrid.mdx

Removes placeholders from the grid. You can remove placeholders from the start, end, or by a specific groupKey.

```APIDOC
## removePlaceholders

### Description
Remove placeholders.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
* **type** ("start" | "end" | {groupKey: string | number}) - Required - Remove the placeholders corresponding to the groupkey. When "start" or "end", remove all placeholders in that direction.

### Response
#### Success Response (200)
None explicitly documented.

### Request Example
```javascript
// Example usage (assuming 'grid' is an instance of FrameInfiniteGrid)
grid.removePlaceholders('start');
grid.removePlaceholders({ groupKey: 'myGroup' });
grid.removePlaceholders('end');
```
```

--------------------------------

### contentError Event

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/MasonryInfiniteGrid.mdx

The event is fired when scrolling reaches the start or when data for a virtual group is required.

```APIDOC
### contentError

#### Description
The event is fired when scrolling reaches the start or when data for a virtual group is required.

#### Parameters
- **e** (InfiniteGrid.OnContentError): The object of data to be sent to an event.
```

--------------------------------

### requestPrepend Event

Source: https://github.com/naver/egjs-infinitegrid/blob/master/packages/docs/versioned_docs/version-4.13.0/api/MasonryInfiniteGrid.mdx

The event is fired when scrolling reaches the start or when data for a virtual group is required.

```APIDOC
### requestPrepend

#### Description
The event is fired when scrolling reaches the start or when data for a virtual group is required.

#### Parameters
- **e** (InfiniteGrid.OnRequestPrepend): The object of data to be sent to an event.
```