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

[IceFreez3r]

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?

No overload matches this call.
  Overload 1 of 2, '(props: SplitProps | Readonly<SplitProps>): Split', gave the following error.
    Type '{ minSize: number; cursor: string; render: ({ getGridProps, getGutterProps }: { getGridProps: any; getGutterProps: any; }) => Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Split> & Readonly<SplitProps>'.
      Property 'render' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Split> & Readonly<SplitProps>'.
  Overload 2 of 2, '(props: SplitProps, context: any): Split', gave the following error.
    Type '{ minSize: number; cursor: string; render: ({ getGridProps, getGutterProps }: { getGridProps: any; getGutterProps: any; }) => Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Split> & Readonly<SplitProps>'.
      Property 'render' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Split> & Readonly<SplitProps>'.ts(2769)

[growthwp]

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;
}

[IceFreez3r]

Tyvm, got it working.