Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
@react-aria/focus
Advanced tools
@react-aria/focus is a library that provides accessible focus management utilities for React applications. It helps in managing focus behavior in a way that is compliant with accessibility standards.
useFocusRing
The `useFocusRing` hook provides a way to apply focus styles to an element when it is focused. It returns properties to spread on the element and a boolean indicating if the focus is visible.
import { useFocusRing } from '@react-aria/focus';
function MyComponent() {
let { isFocusVisible, focusProps } = useFocusRing();
return (
<button {...focusProps} style={{ outline: isFocusVisible ? '2px solid blue' : 'none' }}>
Click me
</button>
);
}
FocusScope
The `FocusScope` component manages focus within a contained area. It ensures that focus stays within the scope and can restore focus to the previously focused element when the scope is unmounted.
import { FocusScope } from '@react-aria/focus';
function MyComponent() {
return (
<FocusScope contain restoreFocus autoFocus>
<input placeholder="First input" />
<input placeholder="Second input" />
</FocusScope>
);
}
useFocusWithin
The `useFocusWithin` hook provides a way to detect if any element within a container has focus. It returns properties to spread on the container and a boolean indicating if focus is within the container.
import { useFocusWithin } from '@react-aria/focus';
function MyComponent() {
let { isFocusWithin, focusWithinProps } = useFocusWithin();
return (
<div {...focusWithinProps} style={{ border: isFocusWithin ? '2px solid green' : 'none' }}>
<input placeholder="Focus within me" />
</div>
);
}
react-focus-lock is a library that provides a way to lock focus within a particular area of the DOM. It is useful for managing focus in modal dialogs and other focus-trapping scenarios. Compared to @react-aria/focus, it offers a more focused solution for focus trapping but lacks the broader range of focus management utilities.
focus-trap-react is a library that provides a React wrapper for the focus-trap library. It allows you to trap focus within a DOM node, ensuring that users cannot tab out of the node. This package is similar to @react-aria/focus in its focus-trapping capabilities but does not offer additional focus management hooks like useFocusRing or useFocusWithin.
react-a11y is a library that provides a set of accessibility utilities for React applications, including focus management. It offers a broader range of accessibility features compared to @react-aria/focus, which is more specialized in focus management.
This package is part of react-spectrum. See the repo for more details.
FAQs
Spectrum UI components in React
We found that @react-aria/focus demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.