diff --git a/src/useMergedRefs.ts b/src/useMergedRefs.ts
new file mode 100644
index 0000000..be42c28
--- /dev/null
+++ b/src/useMergedRefs.ts
@@ -0,0 +1,41 @@
+import { useMemo } from 'react'
+
+type CallbackRef<T> = (ref: T | null) => void
+type Ref<T> = React.MutableRefObject<T> | CallbackRef<T>
+
+const toFnRef = <T>(ref?: Ref<T> | null) =>
+  !ref || typeof ref === 'function'
+    ? ref
+    : (value: T) => {
+        ref.current = value
+      }
+
+export function mergeRefs<T>(refA?: Ref<T> | null, refB?: Ref<T> | null) {
+  const a = toFnRef(refA)
+  const b = toFnRef(refB)
+  return (value: T | null) => {
+    if (a) a(value)
+    if (b) b(value)
+  }
+}
+
+/**
+ * Create and returns a single callback ref composed from two other Refs.
+ *
+ * ```tsx
+ * const Button = React.forwardRef((props, ref) => {
+ *   const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
+ *   const mergedRef = useMergedRefs(ref, attachRef);
+ *
+ *   return <button ref={mergedRef} {...props}/>
+ * })
+ * ```
+ *
+ * @param refA A Callback or mutable Ref
+ * @param refB A Callback or mutable Ref
+ */
+function useMergedRefs<T>(refA?: Ref<T> | null, refB?: Ref<T> | null) {
+  return useMemo(() => mergeRefs(refA, refB), [refA, refB])
+}
+
+export default useMergedRefs
diff --git a/test/useMergedRefs.test.tsx b/test/useMergedRefs.test.tsx
new file mode 100644
index 0000000..b1f364f
--- /dev/null
+++ b/test/useMergedRefs.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { useCallbackRef } from '../src'
+import useMergedRefs from '../src/useMergedRefs'
+
+describe('useMergedRefs', () => {
+  it('should return a function that returns mount state', () => {
+    let innerRef: HTMLButtonElement
+    const outerRef = React.createRef<HTMLButtonElement>()
+
+    const Button = React.forwardRef((props, ref) => {
+      const [buttonEl, attachRef] = useCallbackRef<HTMLButtonElement>()
+      innerRef = buttonEl!
+
+      const mergedRef = useMergedRefs(ref, attachRef)
+
+      return <button ref={mergedRef} {...props} />
+    })
+
+    // enzyme swallows the ref
+    function Wrapper() {
+      return <Button ref={outerRef} />
+    }
+    mount(<Wrapper />)
+
+    expect(innerRef!.tagName).toEqual('BUTTON')
+    expect(outerRef.current!.tagName).toEqual('BUTTON')
+  })
+})