use-callback-ref
Advanced tools
Package description
The use-callback-ref npm package provides React hooks for creating and managing callback refs in a more convenient and powerful way. It allows for the creation of refs that can execute a callback function whenever the ref changes, enabling more reactive and dynamic interactions with DOM elements or component instances in React applications.
Creating a callback ref
This feature allows the creation of a callback ref that executes a callback function whenever the ref's current element changes. In this example, the callback updates the state with the height of the element.
import { useCallbackRef } from 'use-callback-ref';
const MyComponent = () => {
const [height, setHeight] = useState(0);
const ref = useCallbackRef(null, (element) => {
if (element !== null) {
setHeight(element.getBoundingClientRect().height);
}
});
return <div ref={ref}>Content</div>;
};Using a callback ref with useEffect
This demonstrates how to use a callback ref in conjunction with useEffect to perform actions whenever the ref's current element changes. The callback ref updates a state variable, which triggers the useEffect hook.
import { useCallbackRef } from 'use-callback-ref';
import { useEffect } from 'react';
const MyComponent = () => {
const [node, setNode] = useState(null);
const ref = useCallbackRef(null, setNode);
useEffect(() => {
if (node) {
// Perform actions with the node
}
}, [node]);
return <div ref={ref}>Content</div>;
};The react-use library is a collection of essential React hooks. It includes a wide variety of hooks for different purposes, including some that can be used to achieve similar functionality to use-callback-ref, such as managing refs and executing effects based on ref changes. However, react-use offers a broader scope of hooks beyond just managing callback refs.
use-referee is a smaller, more focused package that provides hooks for managing refs in React, similar to use-callback-ref. It offers a straightforward approach to creating and managing refs, but it might not have the same level of customization or additional features found in use-callback-ref.
Readme
API is 99% compatible with React createRef and useRef, and just adds another argument - callback,
which would be called on ref update.
createCallbackRef(callback) - (aka React.createRef) would call provided callback when ref is changed.
useRef(initialValue, callback) - (aka React.useRef)would call provided callback when ref is changed.
callback in both cases is callback(newValue, oldValue). Callback would not be called if newValue and oldValue is the same.
import {useRef, createRef, useState} from 'react';
import {useCallbackRef, createCallbackRef} from 'use-callback-ref';
const Component = () => {
const [,forceUpdate] = useState();
// I dont need callback when ref changes
const ref = useRef(null);
// but sometimes - it could be what you need
const anotherRef = useCallbackRef(null, () => forceUpdate());
useEffect( () => {
// now it's just possible
}, [anotherRef.current]) // react to dom node change
}
💡 You can use useCallbackRef to convert RefObject into RefCallback, creating bridges between the old and the new code
// some old component
const onRefUpdate = (newValue) => {...}
const refObject = useCallbackRef(null, onRefUpdate);
// ...
<SomeNewComponent ref={refObject}/>
mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef - merges a few refs together
import React from 'react'
import {mergeRefs} from 'use-callback-ref'
const MergedComponent = React.forwardRef(function Example(props, ref) {
const localRef = React.useRef()
return <div ref={mergeRefs([localRef, ref])} />
})
based on https://github.com/smooth-code/react-merge-refs, just exposes RefObject, instead of callback
When developing low level UI components, it is common to have to use a local ref but also support an external one using React.forwardRef. Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility.
MIT
FAQs
The same useRef, but with callback
We found that use-callback-ref demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.