Socket
Socket
Sign inDemoInstall

focus-trap-react

Package Overview
Dependencies
Maintainers
0
Versions
70
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

focus-trap-react

A React component that traps focus.


Version published
Weekly downloads
713K
increased by11.07%
Maintainers
0
Weekly downloads
ย 
Created

What is focus-trap-react?

The focus-trap-react package is a React wrapper for the focus-trap library, which is used to manage focus within a DOM node. This is particularly useful for accessibility purposes, ensuring that keyboard navigation is contained within a specific area, such as a modal dialog or a dropdown menu.

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

Basic Focus Trap

This example demonstrates a basic focus trap that contains three buttons. When the focus is within this div, it will be trapped and cannot move outside of it using keyboard navigation.

import React from 'react';
import FocusTrap from 'focus-trap-react';

const BasicFocusTrap = () => (
  <FocusTrap>
    <div>
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
    </div>
  </FocusTrap>
);

export default BasicFocusTrap;

Focus Trap with Initial Focus

This example shows a focus trap where the initial focus is set to a specific button using the `initialFocus` prop. When the focus trap is activated, the focus will automatically move to the button with the ID 'initial-focus'.

import React from 'react';
import FocusTrap from 'focus-trap-react';

const FocusTrapWithInitialFocus = () => (
  <FocusTrap initialFocus='#initial-focus'>
    <div>
      <button id='initial-focus'>Initial Focus Button</button>
      <button>Button 2</button>
      <button>Button 3</button>
    </div>
  </FocusTrap>
);

export default FocusTrapWithInitialFocus;

Focus Trap with Return Focus

This example demonstrates a focus trap that will return the focus to the element that activated it once the trap is deactivated. The `returnFocus` prop ensures that the focus goes back to the button that was clicked to activate the focus trap.

import React, { useState } from 'react';
import FocusTrap from 'focus-trap-react';

const FocusTrapWithReturnFocus = () => {
  const [isTrapActive, setIsTrapActive] = useState(false);

  return (
    <div>
      <button onClick={() => setIsTrapActive(true)}>Activate Focus Trap</button>
      {isTrapActive && (
        <FocusTrap returnFocus>
          <div>
            <button onClick={() => setIsTrapActive(false)}>Deactivate Focus Trap</button>
            <button>Button 2</button>
            <button>Button 3</button>
          </div>
        </FocusTrap>
      )}
    </div>
  );
};

export default FocusTrapWithReturnFocus;

Other packages similar to focus-trap-react

Keywords

FAQs

Package last updated on 21 Sep 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