		import { RefObject } from "react";
		export declare function createCallbackRef<T>(callback: (newValue: T, lastValue: T \| null) => any): RefObject<T>;
		export declare function createCallbackRef<T>(callback: (newValue: T \| null, lastValue: T \| null) => any): RefObject<T>;

dist/es2015/index.d.ts

		export { useCallbackRef } from './useRef';
		export { createCallbackRef } from './createRef';
		export { mergeRefs } from './mergeRef';

dist/es2015/index.js

		export { useCallbackRef } from './useRef';
		export { createCallbackRef } from './createRef';
		export { mergeRefs } from './mergeRef';

dist/es2015/useRef.d.ts

		import { MutableRefObject } from 'react';
		export declare function useCallbackRef<T>(initialValue: T, callback: (newValue: T, lastValue: T) => void): MutableRefObject<T>;
		export declare function useCallbackRef<T>(initialValue: T \| null, callback: (newValue: T \| null, lastValue: T \| null) => void): MutableRefObject<T \| null>;

dist/es5/createRef.d.ts

		import { RefObject } from "react";
		export declare function createCallbackRef<T>(callback: (newValue: T, lastValue: T \| null) => any): RefObject<T>;
		export declare function createCallbackRef<T>(callback: (newValue: T \| null, lastValue: T \| null) => any): RefObject<T>;

dist/es5/index.d.ts

		export { useCallbackRef } from './useRef';
		export { createCallbackRef } from './createRef';
		export { mergeRefs } from './mergeRef';

dist/es5/index.js

		@@ -7,1 +7,3 @@ "use strict";
		exports.createCallbackRef = createRef_1.createCallbackRef;
		var mergeRef_1 = require("./mergeRef");
		exports.mergeRefs = mergeRef_1.mergeRefs;

dist/es5/useRef.d.ts

		import { MutableRefObject } from 'react';
		export declare function useCallbackRef<T>(initialValue: T, callback: (newValue: T, lastValue: T) => void): MutableRefObject<T>;
		export declare function useCallbackRef<T>(initialValue: T \| null, callback: (newValue: T \| null, lastValue: T \| null) => void): MutableRefObject<T \| null>;

package.json

		{
		"name": "use-callback-ref",
		"version": "1.0.1",
		"version": "1.1.0",
		"description": "The same useRef, but with callback",
		@@ -42,3 +42,13 @@ "main": "dist/es5/index.js",
		"createRef"
		],
		"size-limit": [
		{
		"path": "dist/es2015/index.js",
		"limit": "0.5 KB"
		},
		{
		"path": "dist/es2015/useRef.js",
		"limit": "0.5 KB"
		}
		]
		}

README.md

		@@ -25,2 +25,3 @@ <div align="center">
		# API
		## useRef API
		API is 99% compatible with React `createRef` and `useRef`, and just adds another argument - `callback`,
		@@ -52,3 +53,32 @@ which would be called on __ref update__.

		💡 You can use `useCallbackRef` to convert RefObject into RefCallback, creating bridges between the old and the new code
		```js
		// some old component
		const onRefUpdate = (newValue) => {...}
		const refObject = useCallbackRef(null, onRefUpdate);
		// ...
		<SomeNewComponent ref={refObject}/>
		```

		## Additional API
		### mergeRefs
		`mergeRefs(refs: arrayOfRefs, [defaultValue]):ReactMutableRef` - merges a few refs together

		```js
		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.



		# License
		MIT

use-callback-ref - npm Package Compare versions

New alerts