Namespace Pollution Mechanism

    @egjs/svelte-infinitegrid
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.0 • Public • Published

    svelte-infinitegrid npm version

    A Svelte component that can easily use egjs-infinitegrid

    Install

    $ npm install @egjs/svelte-infinitegrid  --save

    How to use

    <script>
        import InfiniteGrid, {
            GridLayout,
            JustifiedLayout,
            SquareLayout,
            FrameLayout,
            PackingLayout
        } from "@egjs/svelte-infinitegrid";
    
        let ig;
        let loading;
        let items = [
            { groupKey: 0, key: 0},
            { groupKey: 0, key: 1},
            { groupKey: 0, key: 2},
        ];
        function onAppend(e) {
            const nextGroupKey = (parseFloat(groupKey) || 0) + 1;
            const nextKey = items.length;
    
            items = [
                ...items,
                { groupKey: nextGroupKey, key: nextKey },
                { groupKey: nextGroupKey, key: nextKey + 1 },
                { groupKey: nextGroupKey, key: nextKey + 2 },
            ];
        }
    </script>
    <GridLayout
        items={items}
        itemBy={item => item.key}
        groupBy={item => item.groupKey}
        useFirstRender={false}
        status={null}
        options={{
            threshold: 100,
            isOverflowScroll: false,
            isEqualSize: false,
            isContantSize: false,
            useFit: false,
            useRecycle: false,
            horizontal: false,
        }}
        layoutOptions={{
            align: "center",
        }}
        onAppend = {({ detail }) => onAppend(detail)}
        onPrepend = {({ detail }) => onPrepend(detail)}
        onLayoutComplete = {({ detail }) => onLayoutComplete(detail)}
        onImageError = {({ detail }) => onImageError(detail)}
        onChange = {({ detail }) => onChange(detail)}
        let:item
    >
        {#each visibleItems as item (item.key)}
            <div class="item">
                {`item ${item.key}`}</div>
            </div>
        {/each}
        <div slot="loading">Loading</div>
    </GridLayout>
    • Add slot = "loading" if you want to show the loading bar when calling the startLoading() method.

    Props

    name type default description
    itemBy Function get itemKey Get a unique key that defines how to track changes for items in the iterable.
    groupBy Function get groupKey or data-groupkey Get a unique key to distinguish between groups.
    useFirstRender boolean false The useFirstRender option determines whether the markup will be shown on the first rendering or after loading is complete.
    status IInfiniteGridStatus null State object of the react-infinitegrid module
    layoutType Class GridLayout Specifies the Layout class to use.
    options IInfiniteGridOptions {} The option object of the eg.InfiniteGrid module
    layoutOptions IInfiniteGridOptions {} Options to apply to the Layout.

    Options

    Restore status

    If you want to restore the state, use the status prop.

    • Save Status
    import { GridLayout } from "@egjs/svelte-infinitegrid";
    
    // Save Status
    let ig;
    const status = ig.getStatus();
    
    <GridLayout
    	bind:this={ig}></GridLayout>
    • Restore Status (First mount)
    import { GridLayout } from "@egjs/svelte-infinitegrid";
    
    <GridLayout
    	status={status}></GridLayout>
    • Dynamically restore status
    import { GridLayout } from "@egjs/svelte-infinitegrid";
    
    // Save Status
    let ig;
    ig.setStatus(status);
    
    <GridLayout
    	bind:this={ig}></GridLayout>

    ⚙️ Developments

    npm run dev

    Runs the app in the development mode.
    Open http://localhost:5000 to view it in the browser.

    The page will reload if you make edits.
    You will also see any lint errors in the console.

    Bug Report

    If you find a bug, please report it to us using the Issues page on GitHub.

    License

    react-infinitegrid is released under the MIT license.

    Copyright (c) 2019-present NAVER Corp.
    
    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:
    
    The above copyright notice and this permission notice shall be included in
    all copies or substantial portions of the Software.
    
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.
    

    Install

    npm i @egjs/svelte-infinitegrid

    DownloadsWeekly Downloads

    62

    Version

    3.3.0

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    34

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar