tippyjs-react
tippyjs-react copied to clipboard
Custom `content` type for Headless Tippy Singleton
Discussed in https://github.com/atomiks/tippyjs-react/discussions/355
Moved to an issue since its been ~4 months without any update.
Originally posted by angeloanan March 12, 2022 Hi,
I would like to use a custom Typescript type for the render method of a Headless Tippy Singleton. Here is an example code:
import Tippy, { useSingleton } from '@tippyjs/react'
interface CustomRenderDataType {
some: string
data: string[]
}
const customDataToPass: CustomRenderDataType = { some: 'custom', data: ['type'] }
const Something = () => {
const [source, target] = useSingleton({ overrides: ['render'] })
return (
<>
<Tippy
singleton={source}
render={(attrs, content) => <SomeComponent attr={attrs} data={content} />}
/>
{/* ^ I want this to have a custom type! */}
{/* In here, Typescript complains that ReactNode (`content`) is not assignable to type 'CustomRenderDataType'! */}
<Tippy singleton={target} content={customDataToPass} />
{/* ^ Typescript allows this but technically should be disallowed since CustomRenderDataType != React.ReactNode */}
</>
)
}
// Example render Component that takes in a custom type
const SomeComponent = ({ attr, data }: { attr: unknown; data: CustomRenderDataType }) => {
// TODO
return <></>
}
Is there a way to do it as of now?