feat(react): react devtool #236
Conversation
|
@bvaughn, I've made some progress 😄 |
danilowoz
force-pushed
the
feat/react-devtool
branch
from
0d32ec5 to
5105312
Compare
|
Ooh this is exciting! Eager to see this when it's done! |
danilowoz
force-pushed
the
feat/react-devtool
branch
from
a0ba1b6 to
9d34c00
Compare
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 6e49c03:
|
danilowoz
force-pushed
the
feat/react-devtool
branch
from
9d34c00 to
aa51c06
Compare
|
@danilowoz Exciting to see so many updates! Let me know when it's ready for a test drive. |
| ## UnstyledOpenInCodeSandboxButton & OpenInCodeSandboxButton | ||
| ## ReactDevTools | ||
|
|
||
| Sandpack also provides a component to add a plugin for React debugging, which allows you to inspect the React component hierarchies in the iframe. This is useful for `props` debugging and understanding the component tree. |
There was a problem hiding this comment.
| Sandpack also provides a component to add a plugin for React debugging, which allows you to inspect the React component hierarchies in the iframe. This is useful for `props` debugging and understanding the component tree. | |
| Sandpack also provides a component that adds React DevTools, allowing you to inspect the React component hierarchies in the iframe. This is useful for `props` debugging and understanding the component tree. Our `SandpackReactDevTools` component has the same functionality as the React DevTools brower extensions, but it only shows what is in your Sandpack instance. |
There was a problem hiding this comment.
(I'm not 100% sure if "instance" is the right word there at the end??)
sandpack-react/src/common/Layout.tsx
Outdated
| }) => { | ||
| const { sandpack } = useSandpack(); | ||
| const c = useClasser("sp"); | ||
|
|
||
| return ( | ||
| <SandpackThemeProvider theme={theme}> | ||
| <div ref={sandpack.lazyAnchorRef} className={c("layout")}> | ||
| <div ref={sandpack.lazyAnchorRef} className={c("layout")} style={style}> |
There was a problem hiding this comment.
I didn't get why this was added? is there an instance of the Layout getting inline styles?
There was a problem hiding this comment.
I didn't find a way to override styles in the component level easily, so I realized it was not passing the style props down to the component. I think we could just spread all props into the component and not only explicit pass style, it seems cleaver.
| </SandpackLayout> | ||
| </SandpackProvider> | ||
| ) | ||
| }` |
There was a problem hiding this comment.
Looks like you forgot the "```" ticks for formatting here.
This introduces support for React debugging, which allows you to inspect the React component hierarchies in the iframe. This is useful for
propsdebugging and understanding the component tree.Depends on codesandbox/codesandbox-client#6337