-
|
I want to listen to changes in the SandpackCodeEditor component and set the code to my own state. That is something like: import {
useSandpack,
SandpackProvider,
SandpackLayout,
SandpackCodeEditor
} from "@codesandbox/sandpack-react";
import { useState, useEffect } from 'react';
export default function Editor({ id }: { id: string }) {
const [codeC, setCodeC] = useState('');
const handleCurrentCodeStateUpdate = ({ id, code }: { id: string, code: string }) => {
console.log("This is the code", code);
setCodeC(code)
//do something with the code, like set to global state
}
return (
<div
onKeyDown={handleKeyPress}
>
<SandpackProvider template="vanilla">
<SandpackLayout>
<SandpackCodeEditor
onChange(handleCurrentCodeStateUpdate) //something like an onChange event listener.
/>
</SandpackLayout>
</SandpackProvider>
</div>
);
}
I know I'm doing this wrong, is there a way to properly listen for code editor changes. I'm building a custom code compiler and just needs the editor. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
Hey @risenW! Hope it solves your problem |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
The useActiveCode hook, always return the default code, and not the updated code, so how can i get the updated code once someone start editing the files in the editor? |
Beta Was this translation helpful? Give feedback.
-
|
Ok! I found a working solution for this to have the state of all the files in the editor: Enjoy! |
Beta Was this translation helpful? Give feedback.
Hey @risenW!
We have a custom hook for it, which is the
useActiveCodethat provides you an API to listen and update the code: https://sandpack.codesandbox.io/docs/advanced-usage/hooks#useactivecodeHope it solves your problem