Graphic Walker
Client Side
Framework integration
Using Graphic Walker in NextJS

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 }
);