I have a component with code as such:
const Abc: React.FC<AbcTypes> = ({...}) => {...}
Abc.getLayout = () => {...}
I am unclear how to define/ extend the method getLayout on Abc component in Typescript?
1 Answer
If you are asking how to type this, then you could do this:
const Abc: React.FC<AbcTypes> & { getLayout: () => SomeType } = ({...}) => {...}
Abc.getLayout = () => {...}
If you are asking for a way to define imperative API for your components then useImperativeHandle is what you are looking for.
This will allow the parent component to attach a ref to Abc and call the methods you define.
Here is an example on how to use it:
type AbcRef = {
getLayout: () => string[]
}
const Abc = forwardRef<AbcRef>((props, ref) => {
useImperativeHandle(ref, () => ({
getLayout: () => ['abc'],
}))
return <div>Abc</div>
})
const Parent: FC = () => {
const abcRef = useRef<AbcRef>(null)
useEffect(() => {
console.log(abcRef.current?.getLayout())
}, [])
return <Abc ref={abcRef} />
}
5 Comments
Kayote
Thank you, that did it.
Dhaval Jardosh
Hey @thedude, quick question. Is attaching a function to a react functional component better or using useImperativeHandle? For us, just attaching a function is doing the trick, but people are asking us to not do it. So useImperativeHook seems like our only option. Wondering what are the pros and cons of both.
thedude
@DhavalJardosh not sure I understand, perhaps create a new question here with more details
Dhaval Jardosh
Alexandre Daubricourt
Used to look so much cleaner with classes.. I guess it's just the way the progress goes.. Getting rid of OOP and ending up with huge load of nonsense boilerplate code everywhere..
useStateoruseEffectinstead