[nextjs, custom widget, react hooks]
When creating a custom component one can write a hook and use the useEffect to say manage how the component finally looks, behaves.
However, when this component is rendered in the netlify cms preview its javascript doesn’t execute. I presume this is because the javascript itself isn’t embedded into the preview iFrame.
So how does one go about allowing ones custom react hook component to execute its javascript when rendered in the preview?
admin.tsx
...
// @ts-ignore
cms.registerEditorComponent(BannerBlockEditorComponent);
...
bannerBlockEditorComponent.tsx
...
toPreview: function (obj) {
return (
<BannerBlock data={obj}></BannerBlock>
);
}
...
BannerBlock.tsx
import React, {useCallback, useEffect} from 'react'
import styles from '@/design-system/components/BannerBlock.module.scss'
import Button from "@/components/Button";
interface BannerBlockProps{
data?:string;
children?: React.ReactNode;
className?: any;
};
const BannerBlock = ({children, data}:BannerBlockProps) => {
const handleClick = useCallback(
() => {
console.log('Click happened. but not in preview!');
},
[],
);
data = decodeURI(data);
useEffect(()=>{
console.log("use Effect runs in preview. oh no it doesn't.");
})
return <div>
{children}
<Button onClick={handleClick}>TestButton</Button>
</div>
}
export default BannerBlock