Use ref from child if provided

Bayer-Group · Jan 17, 2024 · 5beef88 · 5beef88
1 parent e9faf9d
commit 5beef88
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import ReactColorA11y from 'react-color-a11y'
 import {
   Box,
@@ -28,7 +28,9 @@ const SvgContent = ({ fillColor }: { fillColor: string }): JSX.Element => (
   </svg>
 )
 
-function App (): JSX.Element {
+function App(): JSX.Element {
+  const textContentRef = useRef(null);
+  const svgContentRef = useRef(null);
   const [backgroundColor, setBackgroundColor] = useState('#222222')
   const [foregroundColor, setForegroundColor] = useState('#333333')
   const [requiredContrastRatio, setRequiredContrastRatio] = useState(4.5)
@@ -65,7 +67,7 @@ function App (): JSX.Element {
               flipBlackAndWhite={flipBlackAndWhite}
               preserveContrastDirectionIfPossible={preserveContrastDirectionIfPossible}
             >
-              <div style={{ padding: '20px', color: foregroundColor }}>
+              <div ref={textContentRef} style={{ padding: '20px', color: foregroundColor }}>
                 <h3>{'With <ReactColorA11y>'}</h3>
                 <TextContent />
               </div>
@@ -86,7 +88,7 @@ function App (): JSX.Element {
               flipBlackAndWhite={flipBlackAndWhite}
               preserveContrastDirectionIfPossible={preserveContrastDirectionIfPossible}
             >
-              <div>
+              <div ref={svgContentRef}>
                 <SvgContent fillColor={foregroundColor} />
               </div>
             </ReactColorA11y>

diff --git a/src/ReactColorA11y.tsx b/src/ReactColorA11y.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, cloneElement, isValidElement, ReactNode } from 'react'
+import React, { useEffect, useRef, cloneElement, isValidElement, ReactNode, ReactElement } from 'react'
 import { colord, extend as extendColord, type Colord } from 'colord'
 import colordNamesPlugin from 'colord/plugins/names'
 import colordA11yPlugin from 'colord/plugins/a11y'
@@ -53,7 +53,7 @@ const shiftBrightnessUntilTargetLuminence = (originalColord: Colord, targetLumin
 }
 
 export interface ReactColorA11yProps {
-  children: ReactNode
+  children: ReactNode & { ref?: React.MutableRefObject<null> } | undefined
   colorPaletteKey?: string
   requiredContrastRatio?: number
   flipBlackAndWhite?: boolean
@@ -67,7 +67,8 @@ const ReactColorA11y: React.FunctionComponent<ReactColorA11yProps> = ({
   flipBlackAndWhite = false,
   preserveContrastDirectionIfPossible = true
 }: ReactColorA11yProps): JSX.Element => {
-  const reactColorA11yRef = useRef(null)
+  const internalRef = useRef(null);
+  const reactColorA11yRef = children?.ref ?? internalRef;
 
   const calculateA11yColor = (backgroundColor: string, originalColor: string): string => {
     const backgroundColord = colord(backgroundColor)
@@ -196,7 +197,7 @@ const ReactColorA11y: React.FunctionComponent<ReactColorA11yProps> = ({
   }, [reactColorA11yRef, colorPaletteKey, requiredContrastRatio, flipBlackAndWhite])
 
   if (!Array.isArray(children) && isValidElement(children)) {
-    return cloneElement(children as React.ReactElement, {
+    return cloneElement(children as ReactElement, {
       key: colorPaletteKey,
       ref: reactColorA11yRef
     })