Can not use as a JSX Component

[proeric]

[vasturiano]

@proeric this is not a React component, so it cannot be used directly as such.

But you can easily convert it into one using react-kapsule.
You just need to do:

import fromKapsule from 'react-kapsule';
import circlePackChart from 'circlepack-chart';

const CirclePackComponent = fromKapsule(circlePackChart);

[unidesigner]

I'm having difficulty to loading it with react-kapsule in a Next.Js app:

import dynamic from 'next/dynamic'
import fromKapsule from 'react-kapsule'

const CirclePack = dynamic(
    () => {
        return import('circlepack-chart')
    },
    { ssr: false }
)

const CirclePackComponent = fromKapsule(CirclePack)

returns TypeError: kapsuleComponent is not a function.

Any help greatly appreciated!

[vasturiano]

Most likely it has to do with dynamic not returning the import directly, because it's loading asynchronously.

[unidesigner]

I could solve it by wrapping in a separate component, i.e.

Use

import dynamic from 'next/dynamic'

const CirclePackComponent = dynamic(
    () => {
        return import('./CirclePack')
    },
    { ssr: false }
)

....

<CirclePackComponent data={data} width={300} height={300} />

with the CirclePack component

import fromKapsule from 'react-kapsule'
import circlePackChart from 'circlepack-chart'

const CirclePack = fromKapsule(circlePackChart)

export default function CirclePackComponent({ data, width, height }) {
    return <CirclePack data={data} width={width} height={height} />
}

Just in case someone else runs into the same issue.