Hi, a new user here.
I'm trying to build a custom component - React Sketch Component using a React component from the NPM module.
What I've done:
- I have added the
https://unpkg.com/react-sketch-canvas@6.2.0to the libraries - Created a custom component
- Imported the package by using window.react-sketch-canvase
I cannot figure out how to add the react component to the custom component in Retool.
It seems like import ReactSketchCanvas from 'react-sketch-canvas'; doesn't work? But I'm not sure.
Can anyone help me debug the issue?
For reference this is the code inside my custom component:
<style>
... some classes
</style>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/react-sketch-canvas@6.2.0"></script>
<div id="react"></div>
<script type="text/babel">
const { ReactSketchCanvas } = window.react-sketch-canvas;
const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem",
};
const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
<div className="card">
<div className="title">Custom component</div>
<ReactSketchCanvas
style={styles}
width="600"
height="400"
strokeWidth={4}
strokeColor="red"
/>
</div>
)
const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent)
const container = document.getElementById('react')
const root = ReactDOM.createRoot(container)
root.render(<ConnectedComponent />)
</script>
Maybe this link: "