Socket
Socket
Sign inDemoInstall

react-focus-lock

Package Overview
Dependencies
Maintainers
1
Versions
106
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-focus-lock

It is a trap! (for a focus)


Version published
Weekly downloads
1.8M
decreased by-4.71%
Maintainers
1
Weekly downloads
 
Created

What is react-focus-lock?

The react-focus-lock package is a React component designed to trap focus within a DOM element. It is commonly used to ensure that keyboard users can navigate modal dialogs and other pop-up UI elements without accidentally interacting with the rest of the page.

What are react-focus-lock's main functionalities?

Focus Trapping

This feature traps the focus within the modal dialog. When the modal is open, the focus cycles through the interactive elements inside the modal and does not move to the background elements.

{"import React from 'react';\nimport FocusLock from 'react-focus-lock';\n\nconst Modal = ({ onClose }) => (\n  <FocusLock>\n    <div className='modal'>\n      <button onClick={onClose}>Close</button>\n      {/* other modal contents */}\n    </div>\n  </FocusLock>\n);"}

AutoFocus and Return Focus

This feature automatically focuses the first focusable element within the FocusLock on mount and returns the focus to the initially focused element when the FocusLock is unmounted.

{"import React from 'react';\nimport FocusLock from 'react-focus-lock';\n\nconst Modal = ({ onClose }) => (\n  <FocusLock autoFocus={true} returnFocus={true}>\n    <div className='modal'>\n      <button onClick={onClose}>Close</button>\n      {/* other modal contents */}\n    </div>\n  </FocusLock>\n);"}

Focus Grouping

This feature allows grouping of focusable elements. Focus can be moved inside a group, and it will be contained within the elements of that group.

{"import React from 'react';\nimport FocusLock, { MoveFocusInside } from 'react-focus-lock';\n\nconst Group = () => (\n  <div>\n    <MoveFocusInside>\n      <button>Button1</button>\n    </MoveFocusInside>\n    <MoveFocusInside>\n      <button>Button2</button>\n    </MoveFocusInside>\n  </div>\n);\n\nconst App = () => (\n  <FocusLock group='group1'>\n    <Group />\n  </FocusLock>\n);"}

Other packages similar to react-focus-lock

Keywords

FAQs

Package last updated on 26 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc