I'm struggling to get this library to run. I started with the example from the <a href

[React Split Grid] Example from docu doesn't work for me about split HOT 2 OPEN

IceFreez3r commented on June 16, 2024

[React Split Grid] Example from docu doesn't work for me

from split.

Comments (2)

growthwp commented on June 16, 2024 1

This library, indeed, is poorly documented, and it's not immediately clear how to get things running, how things are passed down and how to use them. Alas, here you go:

//app.js
import Split from "react-split-grid";

import "./styles.css";

export default function App() {
  return (
    <Split
      render={({ getGridProps, getGutterProps }) => (
        <div className="grid" {...getGridProps()}>
          <div />
          <div
            className="gutter-col gutter-col-1"
            {...getGutterProps("column", 1)}
          />
          <div />
          <div
            className="gutter-col gutter-col-2"
            {...getGutterProps("column", 2)}
          />
          <div />
          <div
            className="gutter-col gutter-col-3"
            {...getGutterProps("column", 3)}
          />
          <div />
          <div />
          <div
            className="gutter-row gutter-row-1"
            {...getGutterProps("row", 1)}
          />
          <div />
        </div>
      )}
    />
  );
}

You also need some barebones styling:

//style.css
.grid {
  display: grid;
  grid-template-rows: 1fr 10px 1fr;
  grid-template-columns: 1fr 10px 1fr 10px 1fr;
  height: 700px;
  width: 700px;
  border: 2px solid grey;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
  row-gap: 0px;
  column-gap: 0px;
}

.gutter-col {
  grid-row: 1/-1;
  cursor: col-resize;
  background-color: rgb(229, 231, 235);
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter-col-1 {
  grid-column: 2;
}

.gutter-col-3 {
  grid-column: 4;
}

.gutter-row {
  grid-column: 1/-1;
  cursor: row-resize;
  background-color: rgb(229, 231, 235);
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter-row-1 {
  grid-row: 2;
}