{"id":21890940,"url":"https://github.com/galkinrost/react-ingrid","last_synced_at":"2026-03-16T16:02:25.830Z","repository":{"id":57167029,"uuid":"52713893","full_name":"galkinrost/react-ingrid","owner":"galkinrost","description":"React infinite grid","archived":false,"fork":false,"pushed_at":"2017-01-24T00:09:37.000Z","size":3027,"stargazers_count":59,"open_issues_count":3,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-25T23:26:32.397Z","etag":null,"topics":["grid","infinite-scroll","react"],"latest_commit_sha":null,"homepage":"http://babotech.github.io/react-ingrid/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/galkinrost.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-28T09:30:03.000Z","updated_at":"2022-08-05T08:00:51.000Z","dependencies_parsed_at":"2022-08-30T15:21:52.394Z","dependency_job_id":null,"html_url":"https://github.com/galkinrost/react-ingrid","commit_stats":null,"previous_names":["babotech/react-ingrid"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galkinrost%2Freact-ingrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galkinrost%2Freact-ingrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galkinrost%2Freact-ingrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/galkinrost%2Freact-ingrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/galkinrost","download_url":"https://codeload.github.com/galkinrost/react-ingrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249081516,"owners_count":21209712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","infinite-scroll","react"],"created_at":"2024-11-28T12:18:20.097Z","updated_at":"2026-03-16T16:02:20.794Z","avatar_url":"https://github.com/galkinrost.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Infinite Grid [![Build Status](https://travis-ci.org/babotech/react-ingrid.svg?branch=master)](https://travis-ci.org/babotech/react-ingrid)\n\n![Demo](https://raw.githubusercontent.com/babotech/react-ingrid/master/examples/ingrid_demo.gif)\n\n_Hint: Pay attention to the DOM._\n\n## Installation\n\n```\nnpm install --save react-ingrid\n```\n\n## Features\n\n*  *windowing* - render only visible items\n*  relative positioning - all items position relative each other\n*  supports Immutable.js\n\n## Usage\n```javascript\nimport Ingrid from 'react-ingrid'\n\n// Regular array or Immutable.js List\nconst items = [\n    { id:1, foo: 'bar' },\n    ...\n]\n\n// Your component must accept 'data' prop.\nconst ItemComponent = ({ data }) =\u003e (\n    ...\n)\n\nconst props = {\n    ItemComponent,\n    items,\n    itemWidth: 100,\n    itemHeight: 100,\n    load: () =\u003e ( /* load more items */ ),\n    more: Boolean, // has more\n    loading: Boolean\n}\n\n...\n\u003cIngrid {...props}/\u003e\n\n// or with decorator\nimport { ingrid } from 'react-ingrid'\nconst Grid = ingrid(props =\u003e props)(ItemComponent)\n```\n\n## Props\n\n* [`ItemComponent`](#ItemComponentProp)\n* [`items`](#itemsProp)\n* [`itemWidth`](#itemDimensionsProp)\n* [`itemHeight`](#itemDimensionsProp)\n* [`load`](#loadProp)\n* [`more`](#moreProp)\n* [`loading`](#loadingProp)\n* [`paddingTop`](#paddingTopProp)\n* [`paddingLeft`](#paddingLeftProp)\n* [`onScrollChange`](#onScrollChangeProp)\n* [`PreloaderComponent`](#PreloaderComponentProp)\n* [`preloaderHeight`](#preloaderHeightProp)\n* [`isShowingPreloader`](#isShowingPreloaderProp)\n* [`shouldPrerenderAll`](#shouldPrerenderAll)\n\n\n\u003ca name=\"ItemComponentProp\"\u003e\u003c/a\u003e\n#### ItemComponent (required)\n\nUse your :sparkles:imagination:sparkles: to define how your grid items should look.\n\nThis component gets:\n\n* `data` - The data to render (plain object or Immutable.js)\n\nIt should return a react component. For example:\n\n```js\nconst ItemComponent = ({data}) =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003e{data.title}\u003c/h1\u003e\n    \u003c/div\u003e\n)\n```\n\n\n\u003ca name=\"itemsProp\"\u003e\u003c/a\u003e\n#### items (required)\n\nAn array (or Immutable.js List) of items to display. For example:\n\n```js\nconst items = [\n    {id:1, foo: 'bar'},\n    ...\n]\n```\n\n\n\u003ca name=\"itemDimensionsProp\"\u003e\u003c/a\u003e\n#### itemWidth \u0026 itemHeight (required)\n\nItemComponent's width and height.\n\nFor example, to render adaptive Ingrid (like with CSS media queries) you can do:\n\n```js\n...\n\nconst [ itemWidth, itemHeight ] =\n    windowWidth \u003e= 320 \u0026\u0026 windowWidth \u003c 376 ? [ 200, 200 ] :\n    windowWidth \u003e= 568 \u0026\u0026 windowWidth \u003c 667 ? [ 300, 300 ] :\n    windowWidth \u003e= 1435 \u0026\u0026 windowWidth \u003c 1445 ? [ 400, 400 ] :\n    [ 500, 500 ]\n\nconst props = {\n    ...\n    ItemComponent: UserPhoto,\n    itemWidth,\n    itemHeight,\n    ...\n}\n\nreturn (\n    \u003cIngrid {...props} /\u003e\n)\n\n...\n```\n\n\n\u003ca name=\"loadProp\"\u003e\u003c/a\u003e\n#### load (required)\n\nFunction that loads more items when user scrolls. Ingrid will call \"load\" every time user scrolls a page (unless you provide the [more](#moreProp) prop).\nYou design how items are modelled. Therefore, it's your responsibility to load \u003cb\u003eand sort\u003c/b\u003e [items](#itemsProp) in your store.\n\n\n\u003ca name=\"moreProp\"\u003e\u003c/a\u003e\n#### more (optional, boolean)\n\nIngrid loads [items](#itemsProp) when user scrolls. You must provide a boolean to tell whether you have more items to load.\n\nBy default, it is always true.\n\n\n\u003ca name=\"loadingProp\"\u003e\u003c/a\u003e\n#### loading (required, boolean)\n\nNormally you don't want to send multiple load requests at the same time. To tell Ingrid not to do it provide a boolean.\n\nAlso, you might want to show a preloader while loading new items. For example:\n\n```js\nconst ImagesGrid = ({ onLoadmore, loading }) =\u003e {\n    const props = {\n        ...\n        load: () =\u003e onLoadmore(),\n        loading,\n        ...\n    }\n\n    return (\n        \u003cIngrid {...props} /\u003e\n    )\n}\n\nclass App extends React.Component {\n    ...\n    render() {\n        const { loading } = this.props\n        return (\n            {loading ?\n                \u003cImagesGrid /\u003e :\n                this.renderLoadmoreSpinner()\n            }\n        )\n    }\n}\n```\n\n\n\u003ca name=\"paddingTopProp\"\u003e\u003c/a\u003e\n#### paddingTop (optional)\n\nYou might want to add extra padding on top. This is the best place to do it :wink:\n\n\u003cb\u003eNote:\u003c/b\u003e Do not do it via CSS — Ingrid will not be able to calculate the top of the container, and everything will shake.\n\n\n\u003ca name=\"paddingLeftProp\"\u003e\u003c/a\u003e\n#### paddingLeft (optional)\n\nThe same is as the [`paddingTop`](#paddingTopProp) but for the left side\n\n\n\u003ca name=\"onScrollChangeProp\"\u003e\u003c/a\u003e\n#### getPaddingTop (optional)\n\nThis function is called when Ingrid is scrolled. It has the following signature:\n\n```js\nfunction getPaddingTop(value)\n```\n\nwhere:\n\n* `value` - current paddingTop, if it \u003e 0 or paddingTop prop then content was scrolled\n\nYou might want to use it to hide/show some element (hide a menu). For example:\n\n```js\nconst ImagesGrid = ({ handleGridScroll }) =\u003e {\n    const props = {\n        ...\n        getPaddingTop: (value) =\u003e handleGridScroll(value),\n        ...\n    }\n\n    return (\n        \u003cIngrid {...props} /\u003e\n    )\n}\n\n// ImagesActions.js\nexport const handleGridScroll = value =\u003e (dispatch, getState) =\u003e {\n    const menuHeight = 300\n    const { isMobile } = getState()\n\n    if (isMobile \u0026\u0026 (value \u003e menuHeight)) {\n        dispatch({\n            action: 'HIDE_MENU'\n        })\n    }\n    if (isMobile \u0026\u0026 (value \u003c menuHeight)) {\n        dispatch({\n            action: 'SHOW_MENU'\n        })\n    }\n}\n\nclass App extends React.Component {\n    ...\n    render() {\n        const { isShowingMenu } = this.props\n        return (\n            ...\n            {isShowingMenu ?\n                \u003cMenu /\u003e : ''\n            }\n            ...\n        )\n    }\n}\n```\n\n\u003ca name=\"isShowingPreloaderProp\"\u003e\u003c/a\u003e\n#### isShowingPreloader (optional, boolean)\n\nIngrid shows a preloader while loading new items. We don't recommend to disable this behaviour. The better way is to create your own preloader and pass it through [`PreloaderComponent`](#PreloaderComponentProp) prop.\n\nBy default, it is true.\n\n\n\u003ca name=\"PreloaderComponentProp\"\u003e\u003c/a\u003e\n#### PreloaderComponent (optional)\n\nIf you don't happy with our default preloader use your :sparkles:imagination:sparkles: to implement your own.\n\n```js\nconst PreloaderComponent = () =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003eMuch loading. So wait.\u003c/h1\u003e\n    \u003c/div\u003e\n)\n```\n\n\n\u003ca name=\"preloaderHeightProp\"\u003e\u003c/a\u003e\n#### preloaderHeight (optional)\n\nYou can add more space for your preloader here.\n\n\u003ca name=\"shouldPrerenderAll\"\u003e\u003c/a\u003e\n#### shouldPrerenderAll (optional)\n\nIf you want to render your grid on the server side you should set this propery true. In this case all items will be rendered on the initial render call.\n\n## Examples\n\n* [Babex.com](http://babex.com/)\n* [Demo](http://babotech.github.io/react-ingrid/)\n\n## License\n\n**MIT**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalkinrost%2Freact-ingrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgalkinrost%2Freact-ingrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgalkinrost%2Freact-ingrid/lists"}