https://github.com/pisyukaev/selectable-grid

A React component library that allows you to select the desired area within a container and get the dimensions and coordinates of the selected area
https://github.com/pisyukaev/selectable-grid

canvas grid hacktoberfest react select selectable-grid

Last synced: 28 days ago
JSON representation

A React component library that allows you to select the desired area within a container and get the dimensions and coordinates of the selected area

• Host: GitHub
• URL: https://github.com/pisyukaev/selectable-grid
• Owner: Pisyukaev
• Created: 2022-06-12T11:49:10.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-16T14:57:03.000Z (7 months ago)
• Last Synced: 2025-04-20T18:39:37.709Z (about 2 months ago)
• Topics: canvas, grid, hacktoberfest, react, select, selectable-grid
• Language: TypeScript
• Homepage: https://selectable-grid.js.org/
• Size: 1.52 MB
• Stars: 13
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  selectable-grid





## Small description

A React component library that allows you to select the desired area within a container and get the dimensions and coordinates of the selected area

## [Live demo](https://pisyukaev.github.io/selectable-grid/)

* * *

## Example

- Example for select area

![patrick](https://i.ibb.co/hBbts3M/patrik.gif)

- Example for responsive grid

![responsive patrick](https://i.ibb.co/ypRYKYt/ezgif-com-gif-maker.webp)

* * *

## Packages

| Package | Version | Description |

|---------|--------|-------------|

| [selectable-grid](https://github.com/Pisyukaev/selectable-grid/tree/main/packages/selectable-grid) | [![NPM](https://img.shields.io/npm/v/selectable-grid.svg)](https://www.npmjs.com/package/selectable-grid) | Vanilla |

| [@selectable-grid/react](https://github.com/Pisyukaev/selectable-grid/tree/main/packages/react) | [![NPM](https://img.shields.io/npm/v/selectable-grid.svg)](https://www.npmjs.com/package/@selectable-grid/react) | React |

| [@selectable-grid/vue](https://github.com/Pisyukaev/selectable-grid/tree/main/packages/vue) | [![NPM](https://img.shields.io/npm/v/selectable-grid.svg)](https://www.npmjs.com/package/@selectable-grid/vue) | Vue |

## License

MIT © [Pisyukaev](https://github.com/Pisyukaev)