Open IceFreez3r opened 1 year ago
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;
}
Tyvm, got it working.
I'm struggling to get this library to run. I started with the example from the documentation, but it doesn't seem to do anything. I just get the divs on my page with no css attached: The component also seems a bit empty in React Dev Tools: Am I missing something?
In VSCode the render function is marked as error. I assume this issue is the cause of that?