Hi, this Gantt component looks pretty solid, kudos! I was trying this out in NextJS14 project, but struggling to get custom component working. I would like to put custom icons and shapes into the tasks. I understand that the loading has to be delayed and executed only on client side.
'use client';
import React from 'react';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('./Chart'), { ssr: false });
const CustomTaskContent = dynamic(() => import('./CustomTaskContent'), {
ssr: false,
});
export default function Page() {
return (
<div>
<Chart taskComp={CustomTaskContent} />
</div>
);
}
// custom component
'use client';
import React, { useState } from 'react';
export default function SomeComponent({ data }: { data: any }) {
const [clicked, setClicked] = useState(data.clicked);
console.log('rendering', data);
function doClick(ev: React.MouseEvent) {
ev.stopPropagation();
setClicked(!clicked);
}
return (
<>
{data.type !== 'milestone' ? (
<>
<div className="wx-text-out text-right">{data.text || ''}</div>
<button onClick={doClick}>
{clicked ? 'Was clicked' : 'Click Me'}
</button>
</>
) : (
<div className="wx-text-out text-left">{'Custom text'}</div>
)}
</>
);
}
But I dont see it rendered, it is somehow ingored. Would be really cool if the docs would cover also NextJS details, thanks!
