{"id":31138606,"url":"https://github.com/temmiland/react-expandable-grid","last_synced_at":"2026-05-17T19:33:22.764Z","repository":{"id":225026271,"uuid":"758690678","full_name":"temmiland/react-expandable-grid","owner":"temmiland","description":"⚠️🧹A React grid component with an expanding detail view 🖥️","archived":false,"fork":false,"pushed_at":"2024-09-06T09:17:14.000Z","size":4391,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-29T14:09:36.957Z","etag":null,"topics":["expandable","gallery","grid","portfolio","preview","react","responsive"],"latest_commit_sha":null,"homepage":"http://demo.temmi.land/react-expandable-grid/","language":"TypeScript","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/temmiland.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-16T21:18:21.000Z","updated_at":"2025-09-19T17:33:18.000Z","dependencies_parsed_at":"2024-02-28T23:34:26.641Z","dependency_job_id":"4f3b6156-9287-45c6-ad81-2f54ec724669","html_url":"https://github.com/temmiland/react-expandable-grid","commit_stats":null,"previous_names":["tomxpcvx/react-expandable-grid","temmiland/react-expandable-grid"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/temmiland/react-expandable-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/temmiland%2Freact-expandable-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/temmiland%2Freact-expandable-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/temmiland%2Freact-expandable-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/temmiland%2Freact-expandable-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/temmiland","download_url":"https://codeload.github.com/temmiland/react-expandable-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/temmiland%2Freact-expandable-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33151759,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["expandable","gallery","grid","portfolio","preview","react","responsive"],"created_at":"2025-09-18T10:46:18.832Z","updated_at":"2026-05-17T19:33:22.746Z","avatar_url":"https://github.com/temmiland.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n    Copyright 2024 Temmi Pietsch\n\n    Permission is hereby granted, free of charge, to any person obtaining a copy of\n    this software and associated documentation files (the “Software”), to deal in\n    the Software without restriction, including without limitation the rights to use,\n    copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the\n    Software, and to permit persons to whom the Software is furnished to do so,\n    subject to the following conditions:\n\n    The above copyright notice and this permission notice shall be included in all\n    copies or substantial portions of the Software.\n\n    THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,\n    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n    OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n    HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n    WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n    OTHER DEALINGS IN THE SOFTWARE.\n--\u003e\n\n# react-expandable-grid  - [![npm](https://img.shields.io/npm/v/@temmiland/react-expandable-grid.svg?color=%2345bf17\u0026style=popout)](https://www.npmjs.com/package/@temmiland/react-expandable-grid)\n\nreact-expandable-grid is a simple-to-use component designed to create grids with an expanding detail view. It provides an easy solution for quickly setting up galleries and portfolios in your React applications. With this component, when a user clicks on an element of your choice, a preview window opens up, displaying a larger (or smaller, depending on the settings) area where you can customize and showcase your content as desired.\n\nTrying it out is always simpler than just reading about it. Take a look at the demo!\n\n## Demo\n\nYou can reach the Demo here: [`https://demo.temmi.land/react-expandable-grid`](https://demo.temmi.land/react-expandable-grid)\n\nTo try it locally, run:\n\n```bash\ngit clone git@github.com:temmiland/react-expandable-grid.git\ncd react-expandable-grid\nbun i\nbun run dev\n```\n\nThen open [`localhost:6006`](http://localhost:6006) in a browser.\n\n## Installation\n\nA straightforward method for using react-expandable-grid involves installing it from the NPM registry and integrating it into your React build process.\n\n```bash\nbun i @temmiland/react-expandable-grid\n\n# or for those living under a rock :D\nnpm i @temmiland/react-expandable-grid\npnpm i @temmiland/react-expandable-grid\nyarn i @temmiland/react-expandable-grid\n```\n\n## Usage\n\n```javascript\n\u003cExpandableGrid\n    elements={ Array\u003cExpandableElement\u003e(15).fill({\n        expandableElement: ({ currentIndex }) =\u003e (\n            \u003cdiv style={ {\n                width: 300,\n                height: 300,\n                background: 'red',\n                color: 'white',\n                marginTop: 10\n            } }\u003e\n                { 'Expandable ' }\n                { currentIndex }\n            \u003c/div\u003e\n        ),\n        expandedElement: ({ currentIndex, close }) =\u003e (\n            \u003cdiv style={ {\n                width: '100%',\n                height: 300,\n                background: 'blue',\n                color: 'white',\n                marginTop: 10\n            } }\u003e\n                { 'Expanded ' }\n                { currentIndex }\n                \u003cbutton onClick={ close }\u003e{ 'Close' }\u003c/button\u003e\n            \u003c/div\u003e\n        )\n    }) }\n    expandableElementWidthInPx={ 300 }\n    fbJustifyContent='space-between'\n    defaultSelectedIndex={ 0 }\n/\u003e\n```\n\n### Properties\n\n| Property                    | Type                        | Explanation                                    | Notes                                                   |\n| --------------------------- | --------------------------- | ---------------------------------------------- | ------------------------------------------------------- |\n| elements                    | `Array\u003cExpandableElement\u003e`  | The list of expandable elements.               |                                                         |\n| expandableElementWidthInPx  | `number`                    | The width of one expandable element.           | `px`                                                    |\n| fbJustifyContent            | `string`                    | The mode for the CSS property justify-content. | one of: `space-between \\| space-around \\| space-evenly` |\n| defaultSelectedIndex        | `number`                    | Default selection of an element with an index  | starts at 0                                             |\n\n### Notes\n\n#### Default values\n\n```javascript\nfbJustifyContent = 'space-between'\n```\n\n## Development (`src`, `lib` and the build process)\n\n**NOTE:** The source code for the component is in `lib`.\n\nTo build, watch and serve the examples (which will also watch the component source), run `bun run dev`.\n\n## License\n\n### (MIT License)\n\n```text\nCopyright 2024 Temmi Pietsch\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the “Software”), to deal in\nthe Software without restriction, including without limitation the rights to use,\ncopy, modify, merge, publish, distribute, sublicense, and/or sell copies of the\nSoftware, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\nOF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftemmiland%2Freact-expandable-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftemmiland%2Freact-expandable-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftemmiland%2Freact-expandable-grid/lists"}