Simple-react-grid-board NPM

API

Simple and easy!

Type Declaration

interface Item {
  id: string;
  x: number;
  y: number;
  w: number;
  h: number;
  render?: (item: IGridItem, placeholder: TPlaceholder) => React.ReactNode;
}

interface GBProps {
  col: number;
  row: number;
  width: number;
  height: number;
  items: Item[];
  boardClassName?: string;
  itemClassName?: string;
  phClassName?: string;
}

Board Props

props	type	explain
col	number	columns of the board
row	number	rows of the board
width	number	width of the board
height	number	height of the board
items	Item	the items
boardClassName?	string	board class
itemClassName?	string	item class
phClassName?	string	placeholder class

Item Props

props	type	explain
id	string	key of the item
x	number	X coordinate of the item, range 0 - col
y	number	Y coordinate of the item range 0 - row
w	number	width of the item, range 1 - col
h	number	height of the item ,range 1 - row
render?	(item, placeholder) => ReactNode	the element children of the item

Demo

import React from 'react';
import GridBoard from 'simple-grid-board';

export default () => (
  <GridBoard
    col={6}
    row={6}
    width={600}
    height={500}
    items={[
      {
        id: 'a',
        x: 0,
        y: 0,
        w: 2,
        h: 1,
        render() {
          return <div>AAAA</div>;
        },
      },
      {
        id: 'b',
        x: 0,
        y: 1,
        w: 1,
        h: 1,
        render() {
          return <div>BBBB</div>;
        },
      },
      { id: 'd', x: 1, y: 1, w: 2, h: 2 },
      { id: 'c', x: 2, y: 0, w: 2, h: 1 },
      { id: 'e', x: 3, y: 3, w: 3, h: 3 },
      { id: 'f', x: 1, y: 3, w: 2, h: 1 },
      { id: 'h', x: 1, y: 5, w: 1, h: 1 },
      { id: 'i', x: 0, y: 2, w: 1, h: 1 },
      { id: 'j', x: 0, y: 3, w: 1, h: 1 },
      { id: 'k', x: 0, y: 4, w: 1, h: 1 },
      { id: 'z', x: 4, y: 0, w: 2, h: 2 },
      { id: 'y', x: 3, y: 1, w: 1, h: 2 },
    ]}
  />
);

for more demo: see DEMO

react grid layout board

@serprex/react-motion @types/react-motion react react-draggable

1.0.2

2 years ago