Focus Management for Your React Application

Features

🔒 Focus Trapping

Ensure focus remains within a specified component, enhancing interactions for modals, dialogs, and overlays.

🔄 Focus Restoration

Automatically return focus to a previously focused element after actions like closing a modal or a dialog.

🧭 Focus Order Management

Dynamically manage and adjust the tab order of elements in the UI layout.

✅ Keyboard Navigation

Improve keyboard navigation within complex UI components like menus, dropdowns, and lists.

🎨 Custom Focus Indicators

Easily customize focus indicators with various styles and animations to match your design.

👁️ Focus Visibility

Differentiate between keyboard and mouse focus using the :focus-visible state.

⚡️ Auto Focus

Automatically set focus on any element when components mount.

📢 Screen Reader Announcements

Improve accessibility by announcing focus changes to screen readers.

🚀 High Performance

Built for high performance with a minimal footprint.

Installation

To install the React Refocus library, use the following command:

npm install react-refocus

Alternatively, if you use Yarn:

yarn add react-refocus

Getting Started

import { FocusTrap } from 'react-refocus';

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

API Reference

See Documentation for complete API reference.

Contributing

We welcome contributions from the community to make React Refocus better. If you find any issues or have suggestions for improvements, feel free to contribute or open an issue on our GitHub Repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Something Missing?

If you find any issues or have suggestions for improvements, feel free to contribute or open an issue on our GitHub Repository. We welcome contributions from the community to make React Refocus better.