react-grid-select

A React component to select a grid size from an available space

Example

Demo

Check out the examples:

• Basic example
• Example with bounds
• Example with large grid

Installation

yarn add react-grid-select

or

npm install react-grid-select

Basic usage

import GridSelect from "react-grid-select";

const Demo = () => {
  const [selectedArea, setSelectedArea] = useState({ width: null, height: null });

  return (
    <GridSelect
      cols={5}
      rows={5}
      onRegionUpdate={setSelectedArea}
    />
  );
};

Props

| Prop | Type | Default | Description | | :- | :- | :- | :- | | rows | number | 5 | The number of rows in the grid | | cols | number | 5 | The number of columns in the grid | | onRegionUpdate | Function | Log to console | Function describing what to do with the selected area information. Probably set this to a state variable | | cellSize | number | 25 | Size of each grid cell in pixels | | bounds | { maxWidthBlock: { width: number; height: number; }; maxHeightBlock: { width: number; height: number; }; }; | None | Enabled area of the grid. By default the whole grid is enabled | | 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 | | styles | object | See below| Custom styles to apply to the grid |

Styles

All default styles can be overridden by using the styles prop which accepts the below options

| Styles | Defaults | | :----- | :----- | | active | { border: "1px solid #4d6cdd", background: "#4d6cdd" } | | hover | { border: "1px solid #fff" }| | cell | { width: cellSize, height: cellSize, background: "#bababa", cursor: "pointer", borderRadius: 3, border: "1px solid #bababa" }| | grid | { position: "relative", display: "grid", color: "#444", margin: "25px 0", gridGap: "4px 6px", gridTemplateColumns: Array(cols).fill(${cellSize}px).join(" ") }| | disabled | { filter: "brightness(0.7)" } |

License

MIT