selectable-grid

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

Example

• Example for select area

• Example for responsive grid

Install

npm install --save selectable-grid

Usage

Example for image in the div element

import React, { useRef, useState } from 'react'

import { SelectableGrid } from 'selectable-grid'
import type { Point, AreaInfo, Size } from 'selectable-grid'
import 'selectable-grid/css'

const App = () => {
  const containerRef = useRef<HTMLDivElement>(null)
  const imgRef = useRef<HTMLImageElement>(null)
  const [imgSize, setImgSize] = useState<Size | undefined>(undefined)

  const handleLoad = ({
    currentTarget: { naturalWidth, naturalHeight }
  }: React.SyntheticEvent<HTMLImageElement>) => {
    setImgSize({
      width: naturalWidth,
      height: naturalHeight,
      aspect: naturalWidth / naturalHeight
    })
  }

  return (
    <div ref={containerRef} className='container'>
      <img
        className='img'
        ref={imgRef}
        src='https://all-t-shirts.ru/goods_images/ru110593II00039d6336575d4ab6f3960422a337e0e78.jpg'
        alt=''
        onLoad={handleLoad}
      />

      <SelectableGrid
        container={containerRef.current}
        imgSize={imgSize}
        onMouseDown={(e: React.MouseEvent, downPosition: Point) => {
          console.log('event => ', e)
          console.log('downPosition => ', downPosition)
        }}
        onMouseMove={(e: React.MouseEvent, areaInfo: AreaInfo) => {
          console.log('event => ', e)
          console.log('areaInfo => ', areaInfo)
        }}
        onMouseUp={(e: React.MouseEvent, areaInfo: AreaInfo) => {
          console.log('event => ', e)
          console.log('areaInfo => ', areaInfo)
        }}
      />
    </div>
  )
}

Props description

Prop name	Prop type
container	HTMLDivElement | null
imgSize?	{ width: number; height: number; aspect: number; }
cellSize	number
onMouseDown	(e: React.MouseEvent, startDownPosition: Point) => void
container	HTMLDivElement | null
onMouseMove	(e: React.MouseEvent, areaInfo: AreaInfo) => void
onMouseUp	(e: React.MouseEvent, areaInfo: AreaInfo) => void
gridStyles	{ strokeStyle?: CanvasFillStrokeStyles['strokeStyle'] lineDashOffset?: CanvasFillStrokeStyles['lineDashOffset'] lineDash?: number[] }
selectAreaStyles	{ strokeStyle?: CanvasFillStrokeStyles['strokeStyle'] fillStyle?: CanvasFillStrokeStyles['fillStyle'] lineDash?: CanvasFillStrokeStyles['lineDash'] }
cellsStyles	{ strokeStyle?: CanvasFillStrokeStyles['strokeStyle'] fillStyle?: CanvasFillStrokeStyles['fillStyle'] }

• Point: x: number, y: number;
• AreaInfo: area: {x: number, y: number, w: number, h: number}, areaInPx: {top: number, left: number, right: number, bottom: number}, areaInPercent: {top: number, left: number, right: number, bottom: number}

Made with create-react-library

License

MIT © Pisyukaev