-
-
Notifications
You must be signed in to change notification settings - Fork 452
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[React Split Grid] Example from docu doesn't work for me #788
Comments
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
The text was updated successfully, but these errors were encountered: