useChangeEventValueCallback hook (DH-17600)

Author: bmingles

packages/react-hooks/src/index.ts

@@ -3,6 +3,7 @@ export * from './SelectionUtils';
 export * from './SpectrumUtils';
 export * from './useAsyncInterval';
 export * from './useCallbackWithAction';
+export * from './useChangeEventValueCallback';
 export * from './useCheckOverflow';
 export * from './useContentRect';
 export { default as useContextOrThrow } from './useContextOrThrow';

packages/react-hooks/src/useChangeEventValueCallback.test.ts

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useChangeEventValueCallback } from './useChangeEventValueCallback';
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('useChangeEventValueCallback', () => {
+  const callback = jest.fn<void, [string]>();
+
+  it('should return a callback function', () => {
+    const { result } = renderHook(() => useChangeEventValueCallback(callback));
+    expect(typeof result.current).toBe('function');
+  });
+
+  it('should call the callback with the target value', () => {
+    const { result } = renderHook(() => useChangeEventValueCallback(callback));
+    const event = {
+      target: { value: 'test' },
+    } as React.ChangeEvent<HTMLInputElement>;
+
+    result.current(event);
+    expect(callback).toHaveBeenCalledWith('test');
+  });
+});

packages/react-hooks/src/useChangeEventValueCallback.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+/**
+ * Returns a callback function that calls the given callback with the `target.value` of
+ * an input change event element.
+ * @param callback the callback to call with the `target.value`
+ * @returns a callback function that calls the given callback with the `target.value`
+ * @example
+ * const [value, setValue] = useState('');
+ * const onChange = useChangeEventValueCallback(setValue);
+ * <input value={value} onChange={onChange} />
+ */
+export function useChangeEventValueCallback<TInput extends HTMLInputElement>(
+  callback: (value: string) => void
+): (event: React.ChangeEvent<TInput>) => void {
+  return useCallback(
+    (event: React.ChangeEvent<TInput>) => {
+      callback(event.target.value);
+    },
+    [callback]
+  );
+}
+
+export default useChangeEventValueCallback;