Maintain multiple refs to a single react element
npm install react-fork-refA small utility function that enables you to pass multiple ref functions / objects to a single react element and maintain them.
Tested on react@16.8.0 but is possibly compatible with older versions.
Install using yarn or npm
``
yarn add react-fork-ref
npm install react-fork-ref --save
Function Component
`jsx
import {FC, useRef, Ref} from "react"
import forkRef from "react-fork-ref";
interface SampleComponentProps {
externalRef?: Ref
}
const SampleComponent: FC
const ref1 = useRef
const logRef = (node:Node | null) => {
console.log(node)
};
return (
);
};
`
Class Component
`jsx
import {Component, createRef, Ref, RefObject} from "react"
import forkRef from "react-fork-ref";
interface SampleComponentProps {
externalRef?: Ref
}
class SampleComponent extends Component
ref1: RefObject
constructor(props: SampleComponentProps) {
super(props);
this.ref1 = createRef();
}
logRef(node: Node | null){
console.log(node)
}
render() {
const {externalRef} = this.props;
return (