Using GraphicWalker in NextJS
the GraphicWalker will only works in client side, so you need wrap the component with dynamic.
npm install @kanaries/graphic-walker styled-components
import dynamic from "next/dynamic";
export const GraphicWalker = dynamic(() => import("@kanaries/graphic-walker")
.then(({ GraphicWalker }) => GraphicWalker)
, { ssr: false });
More examples in nextjs
Here is an example of how to use graphic walker in nextjs with custom color config.
const GraphicWalker = dynamic(
() =>
import('@kanaries/graphic-walker').then(({ GraphicWalker, getColorConfigFromPalette }) => {
const uiTheme = getColorConfigFromPalette(colors.slate);
uiTheme.dark.background = 'gray-950';
return function (props: any) {
return <GraphicWalker {...props} uiTheme={uiTheme} />;
};
}),
{ ssr: false }
);