react-layout-grid-generator

this component is created using react-grid-layout to create dashboard by drag & drop. you can access to the demo.

install it with,

yarn add react-layout-grid-generator

or

npm install react-layout-grid-generator

Options

| prop | type | default | description | | --------------------- | ------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------- | | isEditable | bool | false | allow the end-user to change the position and size of the grid items. | | renderEdit | func | - | grid item to render when edit mode is turned on, use it as a method. see below for usage | | renderView | func | - | the render of grid item when edit mode is off, use it as a method | | onChange? | func | - | the function will be raised if the layout changes in edit mode | | initialLayouts? | object | null | the initial state of layout | | renderDraggableItems? | func | - | to enable drag & drop components into, use it as a method. * each draggable item 'onDragStart' should be binded to 'handleDragStart' | | children? | node | null | children will be rendered inside the LayoutGrid | | gridItemMargin? | number | 10 | margin between each grid item | | editingGridColor? | string | #cccccc80 | background color in edit mode | | breakpointRules? | object | - | min width to apply each layout size e.g. lg, sm, lg and etc. | | colRules? | object | - | maximum number of column in width for each layout size e.g. lg, sm, lg and etc. |

renderEdit and RenderView

in rendering the grid item you can access to the following properties:

| prop | type | description | | ------------ | ------ | ----------------------------------------------------------------------------------------- | | id | string | the id of grid item | | type | string | it can be used as a key for rendering decision | | option | object | it can be used as a place for storing additional data | | x | number | row position of the grid item | | y | number | column position of the grid item | | w | number | width of each grid item | | h | number | height of each grid item | | onUpdateById | func | * only in edit mode. it will update the option property. the inputs are (id, key, value) | | onDeleteById | func | * only in edit mode. it will delete the grid item by id |

EXAMPLES

import { LayoutGrid } from "react-layout-grid-generator";

const widgetItems = [
  { option: { data: "b" }, type: "CHART_A", w: 1, h: 1 },
  { option: { res: "b" }, type: "CHART_B", w: 2, h: 2 },
  { option: {}, type: "WIDGET", w: 1, h: 1 },
];
const [isEditable, setIsEditable] = useState(true);

const [initialLayouts, setInitialLayouts] = useState({});
const [tempLayouts, setTempLayouts] = useState({});

const onLayoutChanged = (newLayouts) => {
  setTempLayouts(newLayouts);
};

const onSave = () => {
  localStorage.setItem("layouts", JSON.stringify({ layouts: tempLayouts }));
};

const onLoad = () => {
  const newLayouts = JSON.parse(localStorage.getItem("layouts")).layouts;
  setInitialLayouts(newLayouts);
};

<LayoutGrid
  isEditable={isEditable}
  renderEdit={({ type, onUpdateById, onDeleteById, id, option }) => (
    <div>
      {type}
      {option?.data ?? ""}
      <button onClick={() => onUpdateById(id, "option", { data: "me" })}>
        Edit
      </button>
      <button onClick={() => onDeleteById(id)}>DELETE</button>
    </div>
  )}
  renderView={({ type, option }) => {
    switch (type) {
      case "CHART_A":
        return <div className="chart-a">CHART_A</div>;
      case "CHART_B":
        return <div className="chart-b">CHART_B</div>;
      case "WIDGET":
        return <div className="chart-c">WIDGETTTTT</div>;

      default:
        return <div className="chart-none">NO TYPE PROVIDED</div>;
    }
  }}
  renderDraggableItems={(handleDragStart) => (
    <div className="layout-grid__widget-items">
      {widgetItems.map((item) => (
        <div
          draggable={true}
          className="widget-item"
          key={item.type}
          onDragStart={(e) => handleDragStart(item, e)}
        >
          {type}
        </div>
      ))}
    </div>
  )}
  onChange={onLayoutChanged}
  initialLayouts={initialLayouts}
>
  <span>Will be added here</span>
</LayoutGrid>;