SashContent children and Typescript

[LindaJuffermans]

I'm trying to use this in a Next w/Typescript project:

<SashContent className={styles.sashWrapLineActive}>
  <span className={styles.sashWrapLine}></span>
</SashContent>

Typescript complains about the span element:

types.d.ts(60, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & ISashContentProps'

Do I need to add anything to allow the element or is this a bug in split-pane-react? On the interface, I see children is defined as JSX.Element[]

[InTheNooB]

Same here

[InTheNooB]

In my case it was because i was using react-split-pan instead of split-pane-react...

[RCQE]

Maybe you need to add sashRender paras like this: https://codesandbox.io/s/split-pane-themes-xmsqtt And u can use the default like this: https://github.com/yyllff/split-pane-react/issues/12#issuecomment-1357527567

[cwellsx]

I guess it's a bug in the definition of the children property of ISashContentProps

Instead of declaring it as type JSX.Element[] it should also support other types e.g. a single element.

Using React with Typescript, children is normally defined as being of type ReactNode see e.g. https://blog.logrocket.com/react-children-prop-typescript/

[cwellsx]

FYI I too get the error in the OP if I try to compile this code using TypeScript.

The code in question is in (and copied from) the themes demo e.g.:

• https://codesandbox.io/p/sandbox/split-pane-themes-xmsqtt?file=%2Fsrc%2Fdemos%2Fdemo3.jsx

That demo is a *.jsx file not a *.tsx file.

[cwellsx]

I worked-around this problem by using the normal typescript instead of trying to use a theme, and instead adding some CSS to get something looking like the "line" style.

sashRender={(_, active) => <SashContent active={active} type="vscode"></SashContent>}

and

.split-sash-content.split-sash-content-vscode {
  background-color: rgb(200,200,200);
  width: 2px;
}
.split-sash-content.split-sash-content-vscode.split-sash-content-active {
  width: 100%;
}