How do I use the React Focus Lock library?

How do I use the React Focus Lock library?

The React Focus Lock library helps manage focus within a specific component, especially useful for modals. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

import React from 'react';
import FocusLock from 'react-focus-lock';

const Modal = ({ isOpen, onClose }) => {
  return (
    <FocusLock>
      <div className='modal'>
        <h2>Modal Title</h2>
        <button onClick={onClose}>Close</button>
      </div>
    </FocusLock>
  );
};

This will lock the focus within the modal when it's open.

What if I want to disable the focus lock?

You can disable the focus lock by using the disabled prop. For example:

<FocusLock disabled={!isOpen}>...</FocusLock>

This way, the focus lock will only be active when the modal is open.