{"id":15688426,"url":"https://github.com/hacksore/react-grid-select","last_synced_at":"2025-07-06T18:33:06.393Z","repository":{"id":41954905,"uuid":"352796698","full_name":"Hacksore/react-grid-select","owner":"Hacksore","description":"React grid selection component","archived":false,"fork":false,"pushed_at":"2022-04-22T14:17:35.000Z","size":10367,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-01T22:09:14.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hacksore.github.io/react-grid-select","language":"TypeScript","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/Hacksore.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":"2021-03-29T22:04:04.000Z","updated_at":"2024-03-28T14:03:35.000Z","dependencies_parsed_at":"2022-08-12T00:31:13.518Z","dependency_job_id":null,"html_url":"https://github.com/Hacksore/react-grid-select","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Hacksore/react-grid-select","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hacksore%2Freact-grid-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hacksore%2Freact-grid-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hacksore%2Freact-grid-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hacksore%2Freact-grid-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hacksore","download_url":"https://codeload.github.com/Hacksore/react-grid-select/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hacksore%2Freact-grid-select/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263951840,"owners_count":23534818,"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-10-03T17:59:47.719Z","updated_at":"2025-07-06T18:33:06.375Z","avatar_url":"https://github.com/Hacksore.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-grid-select\n\nA React component to select a grid size from an available space\n\n[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] [![Build Status][build-badge]][build-badge] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]\n\n## Example\n![Example](preview.gif)\n## Demo\n\nCheck out the examples:\n\n- [Basic example](https://hacksore.github.io/react-grid-select/?path=/story/region-selection--basic-example)\n- [Example with bounds](https://hacksore.github.io/react-grid-select/?path=/story/region-selection--bounds-example)\n- [Example with large grid](https://hacksore.github.io/react-grid-select/?path=/story/region-selection--large-grid)\n\n## Installation\n\n```shell\nyarn add react-grid-select\n```\n\nor\n\n```shell\nnpm install react-grid-select\n```\n\n\n## Basic usage\n\n```js\nimport { GridSelect } from \"react-grid-select\";\n\nconst Demo = () =\u003e {\n  const [selectedArea, setSelectedArea] = useState({ width: null, height: null });\n\n  return (\n    \u003cGridSelect\n      cols={5}\n      rows={5}\n      onRegionUpdate={setSelectedArea}\n    /\u003e\n  );\n};\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| :- | :- | :- | :- |\n| `rows`  | number  | 5 | The number of rows in the grid  |\n| `cols`  | number  | 5 | The number of columns in the grid  |\n| `onRegionUpdate` | Function | Log to console | Function describing what to do with the selected area information. Probably set this to a state variable |\n| `cellSize` | number | 25 | Size of each grid cell in pixels |\n| `bounds` | `{ maxWidthBlock: { width: number; height: number; }; maxHeightBlock: { width: number; height: number; }; };` | None | Enabled area of the grid. By default the whole grid is enabled |\n| `disabled` | boolean | false | Whether or not the grid is currently disabled. Disabling will pause the grid in it's current state and apply the disabled style |\n| `styles` | object | See below| Custom styles to apply to the grid |\n\n## Styles\n\nAll default styles can be overridden by using the styles prop which accepts the below options\n\n| Styles | Defaults |\n| :----- | :----- |\n| active    | `{ border: \"1px solid #4d6cdd\", background: \"#4d6cdd\" }` |\n| hover     | `{ border: \"1px solid #fff\" }`|\n| cell      | `{ width: cellSize, height: cellSize, background: \"#bababa\", cursor: \"pointer\", borderRadius: 3, border: \"1px solid #bababa\" }`|\n| grid      | `{ position: \"relative\", display: \"grid\", color: \"#444\", margin: \"25px 0\", gridGap: \"4px 6px\", gridTemplateColumns: Array(cols).fill(`${cellSize}px`).join(\" \") }`|\n| disabled  | `{ filter: \"brightness(0.7)\" }` |\n\n## License\n\n[MIT](https://github.com/ricardo-ch/react-grid-select/blob/master/LICENSE)\n\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[version-badge]: https://img.shields.io/npm/v/react-grid-select.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-grid-select\n[downloads-badge]: https://img.shields.io/npm/dm/react-grid-select.svg?style=flat-square\n[npmstats]: http://npm-stat.com/charts.html?package=react-grid-select\u0026from=2018-06-18\n[npmstats-badge]: https://img.shields.io/npm/dm/react-grid-select.svg?style=flat-square\n[gzip-badge]: http://img.badgesize.io/https://unpkg.com/react-grid-select/umd/react-grid-select.min.js?compression=gzip\u0026style=flat-square\u00261\n[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\n[license]: https://github.com/ricardo-ch/react-grid-select/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[build-badge]: https://img.shields.io/github/workflow/status/Hacksore/react-grid-select/CI\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksore%2Freact-grid-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacksore%2Freact-grid-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksore%2Freact-grid-select/lists"}