{"id":13436223,"url":"https://github.com/nmn/react-infinity","last_synced_at":"2025-04-06T07:14:18.886Z","repository":{"id":20863859,"uuid":"24150753","full_name":"nmn/react-infinity","owner":"nmn","description":"A UITableView Inspired list and grid display solution with element culling and smooth animations","archived":false,"fork":false,"pushed_at":"2016-09-30T08:30:21.000Z","size":36,"stargazers_count":472,"open_issues_count":7,"forks_count":28,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-30T06:07:35.710Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nmn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-17T15:33:36.000Z","updated_at":"2025-03-26T12:31:12.000Z","dependencies_parsed_at":"2022-07-26T12:47:01.618Z","dependency_job_id":null,"html_url":"https://github.com/nmn/react-infinity","commit_stats":null,"previous_names":["naman34/react-infinity"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-infinity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-infinity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-infinity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nmn%2Freact-infinity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nmn","download_url":"https://codeload.github.com/nmn/react-infinity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445681,"owners_count":20939961,"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":[],"created_at":"2024-07-31T03:00:45.634Z","updated_at":"2025-04-06T07:14:18.869Z","avatar_url":"https://github.com/nmn.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","Performance"],"sub_categories":["Uncategorized","UI"],"readme":"![React Infinity](http://naman.s3.amazonaws.com/react-infinity/react-infinity-2.png)\n\nReact Infinity is an implementation of the UITableView from iOS for the web. \n(Another famous implementation is [Infinity.js](http://airbnb.github.io/infinity/) by AirBnB.)\n\nReact Infinity is much more than just infinity.js repackaged for react.js. React Infinity has been written from the ground up for React.js with maximum performance and using the TransitionGroup addon, animations for every element coming in, going out, or moving around.\n\n\n## Why?\n\n[![Join the chat at https://gitter.im/nmn/react-infinity](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/nmn/react-infinity?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nShowing extremely long pages with a very large number of elements is becoming increasingly common on the web. However, sometimes with with very large number of elements, performance can suffer. As has been a guiding principle behind React.js, DOM nodes can be extremely expensive and can quickly hurt scroll performance of your page.\n\nUITable on iOS solves this by simply only rendering the elements currently visible on the screen. React Infinity brings that logic the web. This way you can have a huge number of elements with smooth performance without memory issues. This is important to ensure a good experience while scrolling, and this is especially important on mobile devices, where the browser can crash if your website has too many DOM elements.\n\n## Why React Infinity\n\nReact Infinity solves more than one problem. Inspired by the animations of Metafizzy's Isoptope, React Infinity provides smooth animations to elements, while they enter, leave, or change positions.\n\n## Usage\n\nI have tried to design an API that requires the minimum possible options to work, with sensible defaults, but when you do want, everything is extremely customisable. Also, standing on the strengths of React, there are no options to change data. Anytime, something changes, you can just re-render the React Infinity Component with it.\n\nThe basic props for React Infinity\n\n```js\n\nvar Infinity = require('react-infinity');\n\n// ...\n  Infinity({\n    data: data, //Array of objects.\n    elementWidth: 300, // Width of one element\n    elementHeight: 300, // height of one element\n    margin: 300,\n    childComponent: ArticleCard, // React Class that will render actual cards. Must accept one object from the data array as props\n\n    /* optional values:\n    transitionable: // an object of type famous.Transitionable. transitionable.get() will replace window.scrollY\n    mobileWidth: // breakpoint for switching to mobile view\n    justifyOnMobile: // pass true to switch to a list instead of a grid on mobile.\n    elementMobileHeight: // element height to use for mobile view\n    elementMobileWidth: // element width to use for mobile view when `justifyOnMobile === false`\n    scrollDelta: // Number of pixels from the top of the page to where React-Infinity is placed.\n    */\n  })\n//...\n\n```\n\nThe props are fairly straightforward.\n\n**data** *array*\n\nThis is the data on which the content is based. It should be an array of objects that can have any data that your application may require and will be passed in to the childComponent as props that you pass in to render.\n\nThe only manadatory property of each object in data is an id field which is unique.\n\n**elementWidth** *number*\n\nWidth of each element in pixels for desktop view.\n\n**elementHeight** *number*\n\nHeight of each element in pixels for desktop view\n\n**margin** *number*\n\nmargin between the elements. This is both the vertical and horizontal margin. v2.0 will bring more flexibility\n\n**childComponent** *React Class*\n\nThis is the react component that is responsible for rendering each object in the data array. This can be any component and will receive the data you pass in. You are responsible for making sure that it renders in way that it conforms to size you have provided.\n\n\n\n## Example\n\nThere will soon be a fully customisable example to let you experience the power of React Infinity. You can take a look at \n[*the* Scribbler](https://scribbler.co) to see an early version of React Infinity in action.\n\n## Support\n\nReact Infinity is in active development and is being dogfooded at [Rushmore.fm](https://rushmore.fm). The project will be using the same version of React Infinity as on react, and bugs will be fixed promptly and performance improvements will land early.\n\nOn the other hand, React Infinity does some things well, and lets you take care of the other things. If you run in to a problem where you're not being able to accomplish something with React-Infinity that you want to, I may be able to let you know of a way. But some things may simply not be possible, such as a masonry layout.\n\n## Contribution\n\nWhile it is in early development, the API will not change dramatically. After a short period of small evolution, the API will quickly be stabilized and any breaking changes in the API will not be accepted. That said, any other improvements are welcome. Testing a UI component can be hard, and I'm particularly interested in any help setting up tests for this component.\n\nThe style guide is important, but it's fairly straightforward.\n- 2 spaces\n- no JSX\n- try to be consistent with the existing code\n- Prefer clear code over comments.\n\nAlso, please feel free to leave issues with questions, bugs, feature requests etc.\n\n\n## Changelog\n\n#### v1.2.1\n- Made transitionable completely optional. Will use window.scrollY by default.\n- Lots of small bug fixes.\n\n#### v1.0.0\n- Fixed bug - incorrectly named function for removing event listener\n- Pre-Rendering made an option and turned off by default\n- Option to choose the DOM element for the container\n- Update to React 0.12.x\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnmn%2Freact-infinity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnmn%2Freact-infinity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnmn%2Freact-infinity/lists"}