How to use react-grid-layout - 10 common examples

import {ContextMenuContainer} from './ContextMenuContainer.jsx';
import {scalesCenterAndK, dictItems, dictFromTuples, dictValues, dictKeys} from './utils.js';
import {getTrackPositionByUid, getTrackByUid} from './utils.js';
import {positionedTracksToAllTracks} from './utils.js';
import {usedServer, tracksInfo, tracksInfoByType} from './config.js';
import {SHORT_DRAG_TIMEOUT, LONG_DRAG_TIMEOUT} from './config.js';
import {GenomePositionSearchBox} from './GenomePositionSearchBox.jsx';
import {ExportLinkModal} from './ExportLinkModal.jsx';
import {createSymbolIcon} from './symbol.js';

import crossImg from 'file!../images/cross.svg';
import cogImg from 'file!../images/cog.svg';
import copyImg from 'file!../images/content_copy.svg';
import plusImg from 'file!../images/plus.svg';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

export class HiGlassComponent extends React.Component {
    constructor(props) {
        super(props);

        this.minHorizontalHeight = 20;
        this.minVerticalWidth = 20;

        this.tempCanvas = document.createElement('canvas');

        this.uid = slugid.nice();
        this.yPositionOffset = 0;
        this.rowHeight = 40;
        this.tiledPlots = {};

        // keep track of the xScales of each Track Renderer

// Libraries
import React, {Component} from 'react'
import {withRouter, WithRouterProps} from 'react-router'
import ReactGridLayout, {WidthProvider, Layout} from 'react-grid-layout'

// Components
const Grid = WidthProvider(ReactGridLayout)
import CellComponent from 'src/shared/components/cells/Cell'

// Utils
import {fastMap} from 'src/utils/fast'

// Constants
import {
  LAYOUT_MARGIN,
  PAGE_HEADER_HEIGHT,
  PAGE_CONTAINER_MARGIN,
  STATUS_PAGE_ROW_COUNT,
  DASHBOARD_LAYOUT_ROW_HEIGHT,
} from 'src/shared/constants'

// Types
import {Cell} from 'src/types/v2'

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import _get from 'lodash/get'
import _map from 'lodash/map'
import _isFunction from 'lodash/isFunction'
import ReactGridLayout, { WidthProvider } from 'react-grid-layout'
import { widgetComponent } from '../../services/Widget/Widget'
import WithWidgetManagement
       from '../HOCs/WithWidgetManagement/WithWidgetManagement'
import WidgetPicker from '../WidgetPicker/WidgetPicker'
import "../../../node_modules/react-grid-layout/css/styles.css"
import "../../../node_modules/react-resizable/css/styles.css"
import './WidgetGrid.scss'

const GridLayout = WidthProvider(ReactGridLayout)

export class WidgetGrid extends Component {
  render() {
    // Setup each widget. Note that we assign a z-index to each widget so that
    // widgets closer to the top of the page have a higher z-index than widgets
    // closer to the bottom of the page. This is so that an open dropdown menu
    // in a widget can extend below it and overlap the widget immediately
    // below. The z-index is necessary because react-grid-layout starts a new
    // stacking context for each widget, so by default widgets lower on the
    // page would be rendered on top of widgets higher on the page since they
    // appear lower in the DOM, thus breaking drop-down menus that extend below
    // a widget
    const highestY = Math.max(
      ..._map(this.props.workspace.widgets, (w, i) => this.props.workspace.layout[i].y)
    )

import * as React from 'react';

import { DataSourceConnector, IDataSourceDictionary } from '../../../data-sources';
import ElementConnector from  '../../ElementConnector';
import ElementConnectorGQL from  '../../ElementConnectorForGQL';

import DialogsActions from './DialogsActions';
import DialogsStore from './DialogsStore';

import MDDialog from 'react-md/lib/Dialogs';
import Button from 'react-md/lib/Buttons/Button';
import List from 'react-md/lib/Lists/List';
import ListItem from 'react-md/lib/Lists/ListItem';

import * as ReactGridLayout from 'react-grid-layout';
var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
var WidthProvider = ReactGridLayout.WidthProvider;
ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);

var e =  new ElementConnectorGQL();

interface IDialogProps {
  dialogData: IVisualDialog; // IDialog;
  dashboard: IDashboardConfig;
}

interface IDialogState {
  dialogId?: string;
  dialogArgs?: IDictionary;
  mounted?: boolean;
  currentBreakpoint?: string;
  layouts?: ILayouts;

import '../styles/ContextMenu.css';

import { SubMenu, ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
import {
  save, saveLayout, timer,
  loadCustomLayout_0, loadCustomLayout_1, loadCustomLayout_2, loadCustomLayout_3,
  resetLayout, fullscreen_matrix, fullscreen_graphics
} from '../keyFunctions'

import rollStore from '../stores/rollStore';

// Grid Layout Initialization
let ReactGridLayout = require('react-grid-layout');
let WidthProvider = ReactGridLayout.WidthProvider;
WidthProvider.measureBeforeMount = true;
let ResponsiveReactGridLayout = WidthProvider(ReactGridLayout.Responsive);

let keymaster = require('keymaster');

@inject('layoutStore', 'sceneStore', 'channelStore')
@observer
export default class Home extends React.Component {  
  componentDidMount() {
    keymaster('⌘+s, ctrl+s', save);
    keymaster('⌘+shift+s, ctrl+shift+s', saveLayout);
    keymaster('ctrl+enter', timer);

    keymaster('shift+r', resetLayout);
    keymaster('shift+g', fullscreen_graphics);
    keymaster('shift+f', fullscreen_matrix);
    keymaster('shift+1', loadCustomLayout_0);
    keymaster('shift+2', loadCustomLayout_1);

import React from "react";
import _ from "lodash";
import RGL, { WidthProvider } from "react-grid-layout";

const ReactGridLayout = WidthProvider(RGL);

class BasicLayout extends React.PureComponent {
  static defaultProps = {
    className: "layout",
    items: 20,
    rowHeight: 30,
    onLayoutChange: function() {},
    cols: 12
  };

  constructor(props) {
    super(props);

    const layout = this.generateLayout();
    this.state = { layout };
  }

import React from 'react'
import _ from 'lodash'
import ReactGridLayout, { WidthProvider } from 'react-grid-layout'
import Cell from '../components/Cell'
import DashboardWrap from '../wrap'

const GridLayout = WidthProvider(ReactGridLayout)

@DashboardWrap('dashboard.container')
class Grid extends React.Component {

  shouldComponentUpdate() {
    return this.props.editMode
  }
  
  getLayerProps = () => {
    const { cols=36, yheight=10, margin=15, gridMargin=0, verticalFree=false, layout, editMode, selectedCell, selectedChild } = this.props
    return {
      className: 'layout',
      style: { margin: -1 * gridMargin },
      margin: [ margin, margin ],
      draggableHandle: '.widget-ctl-bar',
      cols: cols,

import reducer from './store/reducer';
//Menu and torrentlist imports
import TopMenu from './TopMenu/topMenu';
import BottomMenu from './BottomMenu/bottomMenu';
import LeftMenu from './leftMenu/leftMenu';
import TorrentList from './torrentlist';
//Notification Element
import Notifications from './notifications';
//Login Box
import Login from './login';


const reduxStore = createStore(reducer);


const ReactGridLayout = WidthProvider(RGL);

var background = {
  backgroundColor: '#e5e5e5',
  boxShadow: '0 0 20px #000',
}    

class BasicLayout extends React.PureComponent {

  static propTypes = {
    onLayoutChange: PropTypes.func.isRequired
  };

  static defaultProps = {
    className: "layout",
    items: 4,
    rowHeight: 100,

import AttackPatternsDistribution from './AttackPatternsDistribution';

const styles = theme => ({
  container: {
    margin: '0 0 80px 0',
    padding: 0,
  },
  bottomNav: {
    zIndex: 1000,
    padding: '10px 274px 10px 84px',
    backgroundColor: theme.palette.navBottom.background,
    display: 'flex',
  },
});

const ResponsiveReactGridLayout = WidthProvider(Responsive);

class WorkspaceExploreSpaceComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { openConfig: false, currentWidget: {} };
  }

  saveWorkspace(workspaceData) {
    const JSONData = JSON.stringify(workspaceData);
    commitMutation({
      mutation: workspaceMutationFieldPatch,
      variables: {
        id: this.props.workspace.id,
        input: {
          key: 'workspace_data',
          value: Buffer.from(JSONData).toString('base64'),

const data = [...Array(25).keys()];

  return data.map((item, i) => {
    const y = Math.ceil(Math.random() * 4) + 1;
    return {
      x: (random(0, 5) * 2) % 12,
      y: Math.floor(i / 6) * y,
      w: 2,
      h: y,
      i: i.toString(),
      static: Math.random() < 0.05,
    };
  });
}

const ResponsiveReactGridLayout = WidthProvider(Responsive);

export default function BasicGridLayout(props) {
  const [mounted] = useState(true);
  const [currentBreakpoint, setCurrentBreakpoint] = useState('lg');
  const [compactType, setCompactType] = useState('vertical');
  const [layouts, setLayouts] = useState({ lg: props.initialLayout });

  const generateDOM = () => {
    return layouts.lg.map((l, i) => {
      return (
        <div>
          {l.static ? (
            <span title="This item is static and cannot be removed or resized."></span></div>