8:["$","article",null,{"children":[["$","section",null,{"dangerouslySetInnerHTML":{"__html":"$1b"}}],[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://stacknatic.com\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"blog\",\"item\":\"https://stacknatic.com/blog\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Trap Focus in Next.js and React\"}]}"},"children":"$undefined"}],["$","nav",null,{"className":"breadcrumb-container mb-2 leading-6 ml-2 my-3","children":[["$","span","0",{"children":[["$","$L18",null,{"href":"/","passHref":true,"children":"Home"}],["$","span",null,{"className":"breadcrumb-separator mx-2","children":"/"}]]}],["$","span","1",{"children":[["$","$L18",null,{"href":"/blog","passHref":true,"children":"blog"}],["$","span",null,{"className":"breadcrumb-separator mx-2","children":"/"}]]}],["$","span","2",{"children":[["$","span",null,{"className":"current-page bg-green-900","children":"How to Trap Focus in Next.js and React"}],false]}]]}]],["$","header",null,{"children":[["$","h1",null,{"className":"text-lg md:text-xl lg:text-2xl","children":"How to Trap Focus in Next.js and React"}],["$","$L1c",null,{"src":"https://stacknatic.com/media/featured/focus_trap.jpeg","alt":"featured image for How to Trap Focus in Next.js and React","width":600,"height":400,"sizes":"(max-width: 768px) 70vw, (max-width: 1200px) 70vw, 100vw","className":"featured-image","priority":true}],["$","p",null,{"className":"text-center text-sm text-gray-600 dark:text-gray-300","children":"Trapped Focus Example"}],["$","p",null,{"className":"centered-text","children":["Published on:"," ",["$","time",null,{"dateTime":"2024-09-25","children":"September 25, 2024"}],["$","span",null,{"children":[" ","(Updated on:"," ",["$","time",null,{"dateTime":"2024-10-21","children":"October 21, 2024"}],")"]}]]}]]}],["$","section",null,{"className":"sticky-toc","children":["$","$L1d",null,{"bodyContent":"$1e"}]}],["$","$L1f",null,{"src":"https://stacknatic.com/media/videos/focus_trapping_demo.mp4","thumbnail":"https://stacknatic.com/media/featured/focus_trap.jpeg"}],"",["$","section",null,{"className":"text-base sm:text-lg md:text-xl","children":[["$","div",null,{"children":[["$","p","0",{"className":"text-lg leading-9 my-6","children":["In web development, managing focus is critical for ",["$","$L18","1",{"href":"https://stacknatic.com/blog/does-your-website-meet-accessibility-standards","className":"hyperlink underline underline-offset-4 dark:decoration-blue dark:text-blue-300 decoration-blue-dark text-blue-dark break-words","rel":"noopener noreferrer","target":"_blank","children":"accessibility"}],", especially when creating modal dialogs, pop-ups, or interactive components. Trapping focus ensures that keyboard users can navigate your component without losing focus elsewhere on the page. In this blog post, we'll explore how to implement a simple focus trap using React, specifically in a Next.js environment, with a thorough breakdown of the code."]}],["$","h2","1",{"id":"what-is-focus-trapping","className":"text-xl md:text-2xl my-4 font-bold","children":"What is Focus Trapping?"}],["$","p","2",{"className":"text-lg leading-9 my-6","children":"Focus trapping is a technique that restricts keyboard navigation to a specific part of the UI, preventing users from accidentally interacting with elements outside of this section. This is particularly useful in modal dialogs, dropdowns, and other interactive components where users need to focus on specific actions or information."}],["$","h2","3",{"id":"setting-up-your-nextjs-project","className":"text-xl md:text-2xl my-4 font-bold","children":"Setting Up Your Next.js Project"}],["$","p","4",{"className":"text-lg leading-9 my-6","children":"Before we dive into coding, ensure you have a Next.js project set up. If you haven’t created one yet, you can quickly start by running:"}],["$","div","5",{"className":"relative my-6","children":[["$","$L20",null,{"text":"npx create-next-app@latest my-focus-trap-app\ncd my-focus-trap-app"}],["$","pre",null,{"className":"text-light bg-gray-super-dark p-4 pt-8 rounded-md break-words overflow-x-auto","children":["$","code",null,{"className":"whitespace-pre-wrap","children":["$","code",null,{"className":"language-plaintext","children":["npx create-",["$","span","1",{"className":"hljs-built_in","children":"next"}],"-app@latest my-focus-trap-app\ncd my-focus-trap-app"]}]}]}]]}],["$","p","6",{"className":"text-lg leading-9 my-6","children":"During the installation process, answer yes to typescript, tailwind, eslint, and app router."}],["$","p","7",{"className":"text-lg leading-9 my-6","children":"Once your project is ready, navigate to the directory and create a new component called FocusTrap.tsx."}],["$","p","8",{"className":"text-lg leading-9 my-6","children":["Implementing the Focus Trap Component",["$","br","1",{"children":"$undefined"}],"Now, let’s examine the FocusTrap component. This component takes two props: children (the content to be rendered) and active (a boolean to control if the focus trap is active)."]}],["$","p","9",{"className":"text-lg leading-9 my-6","children":"Here's the complete focus trap code:"}],["$","div","10",{"className":"relative my-6","children":[["$","$L20",null,{"text":"$21"}],["$","pre",null,{"className":"text-light bg-gray-super-dark p-4 pt-8 rounded-md break-words overflow-x-auto","children":["$","code",null,{"className":"whitespace-pre-wrap","children":["$","code",null,{"className":"language-typescript","children":[["$","span","0",{"className":"hljs-string","children":"\"use client\""}],";\n",["$","span","2",{"className":"hljs-keyword","children":"import"}]," ",["$","span","4",{"className":"hljs-title class_","children":"React"}],", { useEffect, useRef } ",["$","span","6",{"className":"hljs-keyword","children":"from"}]," ",["$","span","8",{"className":"hljs-string","children":"\"react\""}],";\n",["$","span","10",{"className":"hljs-keyword","children":"interface"}]," ",["$","span","12",{"className":"hljs-title class_","children":"FocusTrapProps"}]," {\n ",["$","span","14",{"className":"hljs-attr","children":"children"}],": ",["$","span","16",{"className":"hljs-title class_","children":"React"}],".",["$","span","18",{"className":"hljs-property","children":"ReactNode"}],";\n ",["$","span","20",{"className":"hljs-attr","children":"active"}],": ",["$","span","22",{"className":"hljs-built_in","children":"boolean"}],"; ",["$","span","24",{"className":"hljs-comment","children":"// Control when the focus trap is active"}],"\n}\n",["$","span","26",{"className":"hljs-keyword","children":"const"}]," ",["$","span","28",{"className":"hljs-title class_","children":"FocusTrap"}],": ",["$","span","30",{"className":"hljs-title class_","children":"React"}],".",["$","span","32",{"className":"hljs-property","children":"FC"}],"<",["$","span","34",{"className":"hljs-title class_","children":"FocusTrapProps"}],"> = ",["$","span","36",{"className":"hljs-function","children":["(",["$","span","1",{"className":"hljs-params","children":"{ children, active }"}],") =>"]}]," {\n ",["$","span","38",{"className":"hljs-keyword","children":"const"}]," containerRef = useRef<",["$","span","40",{"className":"hljs-title class_","children":"HTMLDivElement"}]," | ",["$","span","42",{"className":"hljs-literal","children":"null"}],">(",["$","span","44",{"className":"hljs-literal","children":"null"}],");\n ",["$","span","46",{"className":"hljs-title function_","children":"useEffect"}],"(",["$","span","48",{"className":"hljs-function","children":"() =>"}]," {\n ",["$","span","50",{"className":"hljs-keyword","children":"if"}]," (!active || !containerRef.",["$","span","52",{"className":"hljs-property","children":"current"}],") ",["$","span","54",{"className":"hljs-keyword","children":"return"}],";\n ",["$","span","56",{"className":"hljs-keyword","children":"const"}]," focusableElements = ",["$","span","58",{"className":"hljs-string","children":"'button, [href], [tabindex]:not([tabindex=\"-1\"])'"}],";\n ",["$","span","60",{"className":"hljs-keyword","children":"const"}]," focusableArray = ",["$","span","62",{"className":"hljs-title class_","children":"Array"}],".",["$","span","64",{"className":"hljs-title function_","children":"from"}],"(containerRef.",["$","span","66",{"className":"hljs-property","children":"current"}],".",["$","span","68",{"className":"hljs-property","children":"querySelectorAll"}],"<",["$","span","70",{"className":"hljs-title class_","children":"HTMLElement"}],">(focusableElements));\n ",["$","span","72",{"className":"hljs-keyword","children":"const"}]," firstFocusableElement = focusableArray[",["$","span","74",{"className":"hljs-number","children":"0"}],"];\n ",["$","span","76",{"className":"hljs-keyword","children":"const"}]," lastFocusableElement = focusableArray[focusableArray.",["$","span","78",{"className":"hljs-property","children":"length"}]," - ",["$","span","80",{"className":"hljs-number","children":"1"}],"];\n ",["$","span","82",{"className":"hljs-keyword","children":"const"}]," handleKeyDown = (",["$","span","84",{"className":"hljs-attr","children":"e"}],": ",["$","span","86",{"className":"hljs-title class_","children":"KeyboardEvent"}],"): ",["$","span","88",{"className":"hljs-function","children":[["$","span","0",{"className":"hljs-params","children":"void"}]," =>"]}]," {\n ",["$","span","90",{"className":"hljs-keyword","children":"if"}]," (e.",["$","span","92",{"className":"hljs-property","children":"key"}]," === ",["$","span","94",{"className":"hljs-string","children":"\"Tab\""}],") {\n ",["$","span","96",{"className":"hljs-keyword","children":"if"}]," (e.",["$","span","98",{"className":"hljs-property","children":"shiftKey"}],") { ",["$","span","100",{"className":"hljs-comment","children":"// Shift + Tab"}],"\n ",["$","span","102",{"className":"hljs-keyword","children":"if"}]," (",["$","span","104",{"className":"hljs-variable language_","children":"document"}],".",["$","span","106",{"className":"hljs-property","children":"activeElement"}]," === firstFocusableElement) {\n e.",["$","span","108",{"className":"hljs-title function_","children":"preventDefault"}],"();\n lastFocusableElement.",["$","span","110",{"className":"hljs-title function_","children":"focus"}],"();\n }\n } ",["$","span","112",{"className":"hljs-keyword","children":"else"}]," { ",["$","span","114",{"className":"hljs-comment","children":"// Tab"}],"\n ",["$","span","116",{"className":"hljs-keyword","children":"if"}]," (",["$","span","118",{"className":"hljs-variable language_","children":"document"}],".",["$","span","120",{"className":"hljs-property","children":"activeElement"}]," === lastFocusableElement) {\n e.",["$","span","122",{"className":"hljs-title function_","children":"preventDefault"}],"();\n firstFocusableElement.",["$","span","124",{"className":"hljs-title function_","children":"focus"}],"();\n }\n }\n }\n };\n containerRef.",["$","span","126",{"className":"hljs-property","children":"current"}],".",["$","span","128",{"className":"hljs-title function_","children":"addEventListener"}],"(",["$","span","130",{"className":"hljs-string","children":"\"keydown\""}],", handleKeyDown);\n ",["$","span","132",{"className":"hljs-comment","children":"// Focus the first element inside when the trap is active"}],"\n firstFocusableElement?.",["$","span","134",{"className":"hljs-title function_","children":"focus"}],"();\n ",["$","span","136",{"className":"hljs-keyword","children":"return"}]," ",["$","span","138",{"className":"hljs-function","children":"() =>"}]," {\n containerRef.",["$","span","140",{"className":"hljs-property","children":"current"}],"?.",["$","span","142",{"className":"hljs-title function_","children":"removeEventListener"}],"(",["$","span","144",{"className":"hljs-string","children":"\"keydown\""}],", handleKeyDown);\n };\n }, [active]);\n ",["$","span","146",{"className":"hljs-keyword","children":"return"}]," (\n

\n {children}\n

\n );\n};\n",["$","span","148",{"className":"hljs-keyword","children":"export"}]," ",["$","span","150",{"className":"hljs-keyword","children":"default"}]," ",["$","span","152",{"className":"hljs-title class_","children":"FocusTrap"}],";\n"]}]}]}]]}],["$","h2","11",{"id":"code-explanation","className":"text-xl md:text-2xl my-4 font-bold","children":"Code Explanation"}],["$","p","12",{"className":"text-lg leading-9 my-6","children":[["$","strong","0",{"children":"Imports and Interfaces"}],": We import React along with useEffect and useRef to handle the lifecycle and DOM references within our component. We define our props with TypeScript for type safety."]}],["$","p","13",{"className":"text-lg leading-9 my-6","children":[["$","strong","0",{"children":"Using useRef"}],": containerRef provides a reference to the DOM element that contains our children. This is crucial for querying focusable elements."]}],["$","p","14",{"className":"text-lg leading-9 my-6","children":[["$","strong","0",{"children":"Effect Hook"}],": We use useEffect to set up our focus trapping logic when the active state changes."]}],["$","p","15",{"className":"text-lg leading-9 my-6","children":[["$","strong","0",{"children":"Focusable Elements"}],": We define a string that tells the component which elements should be focusable (button, links, and elements with a tabindex).",["$","br","2",{"children":"$undefined"}],["$","strong","3",{"children":"Handle Key Down"}],": The handleKeyDown function captures key events. If the \"Tab\" key is pressed, it checks if the focus is on the first or the last focusable element:"]}],["$","ul","16",{"className":"list-disc ml-6 break-words","children":[["$","li","0",{"children":"If on the first and \"Shift + Tab\" is pressed, focus shifts to the last focusable element."}],["$","li","1",{"children":"If on the last and just \"Tab\" is pressed, focus shifts back to the first focusable element."}]]}],["$","p","17",{"className":"text-lg leading-9 my-6","children":[["$","strong","0",{"children":"Cleanup"}],": We ensure to remove the event listener on cleanup to prevent memory leaks."]}],["$","p","18",{"className":"text-lg leading-9 my-6","children":[["$","strong","0",{"children":"Focus Control"}],": The first focusable element gets focused whenever the trap becomes active."]}],["$","p","19",{"className":"text-lg leading-9 my-6","children":["Using the FocusTrap Component",["$","br","1",{"children":"$undefined"}],"You can now use the FocusTrap component in various parts of your application:"]}],["$","div","20",{"className":"relative my-6","children":[["$","$L20",null,{"text":"\"use client\";\nimport React, { useState } from \"react\";\nimport FocusTrap from \"./FocusTrap\";\nconst ModalExample = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n

\n \n {isOpen && (\n \n

Modal Title

\n \n \n

\n \n )}\n

\n );\n};\nexport default ModalExample;"}],["$","pre",null,{"className":"text-light bg-gray-super-dark p-4 pt-8 rounded-md break-words overflow-x-auto","children":["$","code",null,{"className":"whitespace-pre-wrap","children":["$","code",null,{"className":"language-typescript","children":[["$","span","0",{"className":"hljs-string","children":"\"use client\""}],";\nimport React, { useState } from ",["$","span","2",{"className":"hljs-string","children":"\"react\""}],";\nimport FocusTrap from ",["$","span","4",{"className":"hljs-string","children":"\"./FocusTrap\""}],";\nconst ModalExample = () => {\n const [isOpen, setIsOpen] = useState(",["$","span","6",{"className":"hljs-literal","children":"false"}],");\n ",["$","span","8",{"className":"hljs-built_in","children":"return"}]," (\n

\n \n {isOpen && (\n \n

Modal Title

\n \n \n

\n \n )}\n

\n );\n};\n",["$","span","16",{"className":"hljs-built_in","children":"export"}]," default ModalExample;"]}]}]}]]}],["$","p","21",{"className":"text-lg leading-9 my-6","children":"In this example, the ModalExample component allows you to open a modal with focus trapping enabled. When the modal is active, users can only tab through the buttons inside it."}],["$","h2","22",{"id":"conclusion","className":"text-xl md:text-2xl my-4 font-bold","children":"Conclusion"}],["$","p","23",{"className":"text-lg leading-9 my-6","children":"Implementing a focus trap in Next.js and React is straightforward with the use of refs and the keydown event listener. It significantly enhances the accessibility of your application, ensuring keyboard users can navigate effectively. By following this guide, you've learned how to implement a simple yet effective focus trap using a functional React component. "}]]}],["$","footer",null,{"children":[["$","div",null,{"className":"flex flex-col justify-right mb-5 border-t-2 py-3 text-sm md:text-lg space-y-2","children":["$","$L22",null,{"post":{"id":68,"title":"How to Trap Focus in Next.js and React","slug":"how-to-trap-focus-in-nextjs-and-react","body":"$23","keyword":"Focus trapping, how to trap focus in react, how to trap focus in next.js","date":"2024-09-25T15:27:56.418428Z","updated":"2024-10-21T18:18:18.653184Z","author":"Michael Akerele","co_authors":[],"author_username":"full-stack-developer","author_job":"Full Stack Developer","author_id":22,"author_avatar":"/media/profile_images/Michael.jpg","co_authors_avatars":[],"category":3,"category_name":"Coding","tags":[],"category_slug":"coding","post_type":"post","no_of_likes":0,"description":"Trapping focus ensures that keyboard users can navigate your component without losing focus elsewhere on the page. Learn how to trap focus in React and Next.js.","featured_image":"/media/featured/focus_trap.jpeg","image_caption":"Trapped Focus Example","video_file":"/media/videos/focus_trapping_demo.mp4","youtube_video_id":"","youtube_video_title":"","no_of_reposts":0,"comments":[],"views":0,"liked":[]}}]}],["$","address",null,{"className":"my-4","children":[["$","span",null,{"className":"font-bold","children":"Author:"}],["$","$L18",null,{"href":"/profile/full-stack-developer","children":["$","span",null,{"className":"flex items-center gap-2","children":[["$","$L1c",null,{"src":"https://stacknatic.com/media/profile_images/Michael.jpg","alt":"author's avatar","width":40,"height":40,"className":"rounded-full mt-2"}],["$","span",null,{"children":["$","span",null,{"children":["Michael Akerele"," "]}]}]]}]}],["$","p",null,{"children":[]}]]}]]}]]}],["$","$12",null,{"fallback":["$","div",null,{"children":"Loading..."}],"children":["$","$L24",null,{"post":"$25"}]}]]}]