# selectable-grid

> selectable-grid

Latest version **2.0.1** (published 2023-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install selectable-grid
pnpm add selectable-grid
yarn add selectable-grid
bun add selectable-grid
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2023-01-18 |
| First published | 2022-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Vitalij Zakutnij |
| Maintainers | pisyukaev |
| Keywords | canvas, selectable-grid, animation |

## Links

- npm: https://www.npmjs.com/package/selectable-grid
- Repository: https://github.com/pisyukaev/selectable-grid
- Homepage: https://selectable-grid.js.org
- Issues: https://github.com/pisyukaev/selectable-grid/issues
- npm.io page: https://npm.io/package/selectable-grid

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2023-01-18
- 2.0.0 — 2023-01-18
- 1.1.3 — 2022-08-22
- 1.1.2 — 2022-07-31
- 1.1.1 — 2022-07-30
- 1.0.3 — 2022-07-23
- 1.0.2 — 2022-07-23
- 1.0.1 — 2022-07-23
- 1.0.0 — 2022-07-23

## README

# selectable-grid

## Install
```bash
npm install --save selectable-grid
```

## Usage example

```js
import SelectableGrid from 'selectable-grid'

const init = () => {
  const img = document.querySelector('img')

  if (!img) {
    return
  }

  img.addEventListener('load', () => {
    new SelectableGrid({
      container: img,
      cellCount: 15,
    })
  })
}

init()

```

## Properties
| Property | Required | Type | Description |
|----------|----------|------|-------------|
| `container` | `true` | `HTMLImageElement` \| `HTMLVideoElement` | `img` or `video` node |
| `cellCount` | `true` | `number` | count of the cell in the grid |
| `mouseMove` | `false` | `function(area: {x: number, y: number, w: number, h: number}, selectArea: {x: number, y: number, w: number, h: number}, e: MouseEvent){}` | handler of mouse move on the grid |
| `mouseDown` | `false` | `(point: {x: number, y:number}, e: MouseEvent) => void` | handler of mouse down on the grid |
| `mouseUp` | `false` | `(area: {x: number, y: number, w: number, h: number}, selectArea: {x: number, y: number, w: number, h: number}, e: MouseEvent) => void` | handler of mouse up on the grid |
| `cellsStyles` | `false` | `{fillStyle: string}` | color like as color for canvas |
| `gridStyles` | `false` | `{strokeStyle: string}` | color like as color for canvas |
| `areaStyles` | `false` | `{strokeStyle: string, fillStyle: string}` | color like as color for canvas |
| `isArea` | `false` | `boolean` | show area on the grid |
| `keepArea` | `false` | `boolean` | show area on the grid |
| `isCells` | `false` | `boolean` | render cells on the grid |
| `isGrid` | `false` | `boolean` | render grid on the grid |
| `canvasClassName` | `false` | `string` | class name of the canvas |

* * *

## Another packages

[@selectable-grid/react](https://github.com/Pisyukaev/selectable-grid/tree/main/packages/react)

[@selectable-grid/vue](https://github.com/Pisyukaev/selectable-grid/tree/main/packages/vue)

---
_Source: https://npm.io/package/selectable-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._