troch / reinspect

Use redux devtools to inspect useState and useReducer :mag_right:
MIT License
424 stars 24 forks source link

Typescript Props Type Definition for StateInspector is incompatible with `children` prop #83

Open rogi29 opened 1 year ago

rogi29 commented 1 year ago

Description

Integrating the StateInspector into a strict TypeScript react project will fail at build time. Inserting React Nodes as a children prop into the StateInspector component will result with a TypeError. In my specific case I was trying to insert my App component as a children prop and got an error from my IDE.

Error message

image

Code Example

import { StateInspector } from "reinspect";
import { App } from "./app";

export const AppWrapper = () => {
  return (
    <StateInspector>
      <App />
    </StateInspector>
  );
}

Suggestion

After reviewing the source code, indeed the children prop was not defined and there was no use of the PropsWithChildren type. This is absolutely necessary in my opinion, and I am willing to provide a solution and post a pull request to fix this issue.

rogi29 commented 1 year ago

I have to emphasis that this is an issue for React >18, as noted in the stackoverflow below, the React.FC type does not include the children: ReactNode anymore. https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc/71800185#71800185

rogi29 commented 1 year ago

I created a fork and opened a pull request with the relevant changes to support react >18 with typescript: https://github.com/troch/reinspect/pull/84/commits/80a15313dcb97505041362dece73f6ae39b87ff0