react-split-pane
react-split-pane copied to clipboard
type declaration - fix missing `children` prop
React 18's types are more strict and the missing children
prop results in this typescript error being thrown when using the component
Type '{ children: Element[]; css: SerializedStyles; split: "vertical"; minSize: number; maxSize: number; onDragStarted: () => void; onDragFinished: (newSize: number) => void; size: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<SplitPane> & { css?: Interpolation<Theme>; } & Pick<...> & InexactPartial<...> & InexactPartial<...>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<SplitPane> & { css?: Interpolation<Theme>; } & Pick<...> & InexactPartial<...> & InexactPartial<...>'.ts(2322)
(anyone else running into this can use patch-package to modify node_modules/react-split-pane/index.d.ts
in the meantime)
@ellanan FYI,
- optional
children
referPropsWithChildren
- update peerDependencies
Updated to make the children
prop optional!
Since the library still works with react version 16 and 17, would it make sense to keep the peerDependencies at ^16.0.0-0
?
already works with react 18.x
Fork: https://www.npmjs.com/package/@roothub/react-split-pane
👍 i hope this PR can merge soon
@kelvinkoko
use react-reflex
instead
i hope this PR can merge soon~
Finally
I'm still getting this error. Since this is merge then why it is showing this error
It looks like there hasn't been a release since this patch. Could one of the maintainers publish a new release? Thanks!
Please publish this.
still not release?
I also ran into the issue of missing children types after upgrading to React 18. So, I took a temporary measure like the following and will wait until the PR's changes are published to NPM.
If you just want to bypass the type issue while using React 18, you can create the d.ts file below:
// my-project/types/split-pane.d.ts
declare module 'react-split-pane' {
declare class SplitPane extends React.Component<
SplitPaneProps & {
children?: ReactNode;
},
SplitPaneState
> {}
export default SplitPane;
}