Migration Guide from v3 to v4
Changed Usage
Double options are combined into one option.
- JavaScript
 - React
 - Vue@2
 - Vue@3
 - Angular
 - Svelte
 
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const ig = new MasonryInfiniteGrid(".container", {
  attributePrefix: "data-grid-",
  column: 5,
});
ig.renderItems();
import { MasonryInfiniteGrid } from "@egjs/react-infinitegrid";
<MasonryInfiniteGrid
  attributePrefix={"data-grid-"}
  column={5}
  >
  ...
</MasonryInfiniteGrid>
<template>
  <MasonryInfiniteGrid
    attributePrefix="data-grid-"
    v-bind:column="5">
    ...
  </MasonryInfiniteGrid>
</template>
<script>
  import { MasonryInfiniteGrid } from "@egjs/vue-infinitegrid";
  export default {
    components: {
      MasonryInfiniteGrid,
    },
  };
</script>
<template>
  <MasonryInfiniteGrid
    attributePrefix="data-grid-"
    v-bind:column="5">
    ...
  </MasonryInfiniteGrid>
</template>
<script>
  import { MasonryInfiniteGrid } from "@egjs/vue3-infinitegrid";
  export default {
    components: {
      MasonryInfiniteGrid,
    },
  };
</script>
<div NgxMasonryInfiniteGrid
  [gap]="5"
  attributePrefix="data-grid-"
  >
  ...
</div>
<script>
  import { MasonryInfiniteGrid } from "@egjs/svelte-infinitegrid";
</script>
<MasonryInfiniteGrid
  gap={5}
  attributePrefix={"data-grid-"}
>
  ...
</MasonryInfiniteGrid>
HTML structure
- The option called 
isOverflowScrollis renamedcontainer. - If you set the 
containeroption to true, a container is created inside the wrapper.- The class name of container has been changed from 
_eg-infinitegrid-container_toinfinitegrid-container 
 - The class name of container has been changed from 
 
<body>
  <div class="wrapper">
    <div class="infinitegrid-container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  </div>
</body>
const ig = new InfiniteGrid(".container", {
  container: true,
});
Changes when using umd modules
- We've removed 
egnamespace on umd modules.eg.InfiniteGridis now justInfiniteGrid
 
Changed module names
| From | To | 
|---|---|
| GridLayout | MasonryInfiniteGrid | 
| JustifiedLayout | JustifiedInfiniteGrid | 
| FrameLayout | FrameInfiniteGrid | 
| SquareLayout | Integration into MasonryInfiniteGrid | 
| PackingLayout | PackingInfiniteGrid | 
Changed Options
- Default value of attributePrefix is now 
data-grid-(wasdata-) - The option called 
marginis renamedgap. - The option called 
isOverflowScrollis renamedcontainer. 
Changed Events
- The event called 
appendis renamedrequestAppend. - The event called 
prependis renamedrequestPrepend. - The event called 
layoutCompleteis renamedrenderComplete. - The event called 
changeis renamedchangeScroll. - The event called 
imageErroris renamedcontentError. 
Changed Methods
- The method called 
layoutis renamedrenderItems. - The method 
getItems(true)can be used asgetItems(). - The method 
getItems(false)can be used asgetVisibleItems(). - The usage of the 
getStatusmethod has changed.getStatus(STATUS_TYPE.NOT_REMOVE)(default) gets all infosgetStatus(STATUS_TYPE.REMOVE_INVISIBLE_GROUPS)gets visible infosgetStatus(STATUS.MINIMIZE_INVISIBLE_ITEMS)gets visible infos. However, the information is simplified for invisible items.getStatus(STATUS.MINIMIZE_INVISIBLE_GROUPS)gets visible infos. However, invisible items are removed and only the outline remains.
 
Removed Methods
- The method called 
startLoadingis removed.- Use a method called 
waitinstead. 
 - Use a method called 
 - The method called 
endLoadingis removed.- Automatically check whether loading is ended.
 
 - The method called 
isLoadingis removed.- Use a method called 
isWaitinstead. 
 - Use a method called 
 - The method called 
isProcessingis removed.