{"id":21097560,"url":"https://github.com/nishanbajracharya/react-virtualized-listview","last_synced_at":"2025-05-16T16:31:33.081Z","repository":{"id":32562535,"uuid":"137073229","full_name":"nishanbajracharya/react-virtualized-listview","owner":"nishanbajracharya","description":"A simple virtualized listview inspired by react-virtualized","archived":false,"fork":false,"pushed_at":"2022-12-04T07:18:18.000Z","size":1443,"stargazers_count":46,"open_issues_count":12,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-17T11:13:09.765Z","etag":null,"topics":["javascript","react","virtualizedlist"],"latest_commit_sha":null,"homepage":"https://2zo5k84lx0.codesandbox.io/","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/nishanbajracharya.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":"2018-06-12T13:08:56.000Z","updated_at":"2024-02-01T00:42:21.000Z","dependencies_parsed_at":"2023-01-14T21:45:26.656Z","dependency_job_id":null,"html_url":"https://github.com/nishanbajracharya/react-virtualized-listview","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanbajracharya%2Freact-virtualized-listview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanbajracharya%2Freact-virtualized-listview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanbajracharya%2Freact-virtualized-listview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishanbajracharya%2Freact-virtualized-listview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nishanbajracharya","download_url":"https://codeload.github.com/nishanbajracharya/react-virtualized-listview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225438924,"owners_count":17474484,"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":["javascript","react","virtualizedlist"],"created_at":"2024-11-19T22:48:43.630Z","updated_at":"2024-11-19T22:48:44.256Z","avatar_url":"https://github.com/nishanbajracharya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-virtualized-listview\nA simple virtualized listview inspired by react-virtualized\n\n## Getting started\nThe first step is to add `react-virtualized-listview` into your project.\n\n```sh\n$ npm install --save react-virtualized-listview\n```\n\n**Note:** This library is not dependent on `react-virtualized` which is a separate and highly customizable virtualized list library.\n\n## Usage\nImport the package into your project using the `import` statement\n```js\nimport List from 'react-virtualized-listview';\n```\n\n### Example\n```jsx\nconst data = [{\n  number: 1,\n  height: 40\n}, {\n  number: 2,\n  height: 40\n},{\n  number: 3,\n  height: 40\n}, {\n  number: 4,\n  height: 40\n}, {\n  number: 5,\n  height: 40\n}];\n\n\u003cList\n  source={data}\n  renderItem={({ index, style }) =\u003e (\n    \u003cdiv key={index} style={style}\u003e\n      Hello {index}\n    \u003c/div\u003e\n  )}\n/\u003e\n```\n\n## API\n|      Prop     | Default | Required? |                                                                                                             Description                                                                                                            |\n|:-------------:|:-------:|:---------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n| source        |   [ ]   |    Yes    | An array of the input source. The array is iterated over and index of each item is returned in the `renderItem` prop. *source.item* shold be have *height* property.                                                                                                         |\n| rowHeight     |    24   |     No    | The height of each row in the list.                                                                                                                                                                                                |\n| overScanCount |    5    |     No    | The number of rows to render above and below the visible list window. This is to have some rows already rendered while scrolling above or below the visible list window so that they don't pop in as soon as the list is scrolled. |\n| renderItem    |         |    Yes    | The function that is called when rendering each row.|\n\n### renderItem\nThe renderItem function signature is as follows\n```jsx\n({\n  index, // The index of each item in the source prop\n  style // The style that is applied to the row item\n}) =\u003e \u003cRowItem key={index} index={index} style={style}/\u003e\n```\n**Note:** Passing the `style` prop and applying in the root element of the row item is **required**\n\n## Features planned for next release\n- Expose internal components using default CSS classnames, custom classname injection and refs\n- Add scroll persistence so that the scroll position persists between route changes\n\n## Contributing\nTo contribute, follow one of the two options:\n\n- **Open an Issue**\n\n  Open an issue detailing:\n  1. What the issue is\n  2. Steps to reproduce\n  3. Possible solutions\n\n  Note: These details are recommended but are entirely optional.\n\n- **Send a Pull Request**\n\n  Fork this project and send a pull request to the `master` branch.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishanbajracharya%2Freact-virtualized-listview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnishanbajracharya%2Freact-virtualized-listview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishanbajracharya%2Freact-virtualized-listview/lists"}