Best Practices for Code Organization
Let's create a confortable working environment: let's use Next.js.
Wip
4 minutes read🎁 Wrapper component
I like to create a "wrapper" component that manages the responsiveness and pass all the other props to the viz component, plus width and height.
If you already have a dataviz component and just want to make it responsive, this template should be useful to you:
type ResponsiveDensityChartProps = {
data: number[];
};
// Responsive component = wrapper that manages the dimensions and does nothing else
export const ResponsiveDensityChart = (props: ResponsiveDensityChartProps) => {
const chartRef = useRef(null);
const chartSize = useDimensions(chartRef);
return (
<div ref={chartRef} style={{ width: '100%', height: '100%' }}>
<DensityChart
height={chartSize.height}
width={chartSize.width}
{...props} // pass all the props
/>
</div>
);
};
// Type is the same, with width and height added!
type DensityChartProps = ResponsiveDensityChartProps & {
width: number;
height: number;
};
// Non responsive component
const DensityChart = ({ width, height, data }: DensityChartProps) => {
//... dataviz code goes here
}