replace createRef with useRef (#3124)

* replace createRef with useRef * changeset * missed null
primer · Apr 5, 2023 · 5b3cf49 · 5b3cf49
1 parent 7eaad16
commit 5b3cf49
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 163 deletions.
diff --git a/.changeset/bright-stingrays-accept.md b/.changeset/bright-stingrays-accept.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+replace createRef with useRef
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
@@ -222,7 +222,7 @@ To create an anchor outside of the menu, you need to switch to controlled mode f
 ```javascript live noinline
 const Example = () => {
   const [open, setOpen] = React.useState(false)
-  const anchorRef = React.createRef()
+  const anchorRef = React.useRef(null)
 
   return (
     <>

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
@@ -102,7 +102,7 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
     'anchorRef'
   >
 
-  const containerRef = React.createRef<HTMLDivElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
   useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
 
   return (

diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -111,7 +111,7 @@ export const ControlledMenu = () => {
   const onSelect = (name: string) => fireAction(name)
 
   const [open, setOpen] = React.useState(false)
-  const triggerRef = React.createRef<HTMLButtonElement>()
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
 
   return (
     <>

diff --git a/src/ActionMenu/ActionMenu.tsx b/src/ActionMenu/ActionMenu.tsx
@@ -97,7 +97,7 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children,
     'anchorRef'
   >
 
-  const containerRef = React.createRef<HTMLDivElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
   useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef)
 
   return (

diff --git a/src/__tests__/hooks/useMenuInitialFocus.test.tsx b/src/__tests__/hooks/useMenuInitialFocus.test.tsx
@@ -6,8 +6,8 @@ const Component = () => {
   const [open, setOpen] = React.useState(false)
   const onOpen = () => setOpen(!open)
 
-  const containerRef = React.createRef<HTMLDivElement>()
-  const anchorRef = React.createRef<HTMLButtonElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const anchorRef = React.useRef<HTMLButtonElement>(null)
   useMenuInitialFocus(open, containerRef, anchorRef)
 
   return (

diff --git a/src/__tests__/hooks/useMnemonics.test.tsx b/src/__tests__/hooks/useMnemonics.test.tsx
@@ -13,7 +13,7 @@ const Fixture = ({
   hasTextarea?: boolean
   refNotAttached?: boolean
 }) => {
-  const containerRef = React.createRef<HTMLDivElement>()
+  const containerRef = React.useRef<HTMLDivElement>(null)
   useMnemonics(true, containerRef) // hard coding open=true for test
 
   return (