Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-aria/toggle

Package Overview
Dependencies
Maintainers
2
Versions
826
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/toggle

Spectrum UI components in React

  • 3.10.10
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created

What is @react-aria/toggle?

@react-aria/toggle is a library that provides accessible toggle components for React applications. It is part of the React Aria collection of hooks and components designed to help developers build accessible web applications. The package includes hooks for creating toggle buttons, switches, and other toggleable elements with proper ARIA attributes and keyboard interactions.

What are @react-aria/toggle's main functionalities?

Toggle Button

This code demonstrates how to create a toggle button using the useToggleButton hook from @react-aria/toggle. The button toggles between 'On' and 'Off' states.

import { useToggleButton } from '@react-aria/toggle';
import { useToggleState } from '@react-stately/toggle';

function ToggleButton(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { buttonProps } = useToggleButton(props, state, ref);

  return (
    <button {...buttonProps} ref={ref}>
      {state.isSelected ? 'On' : 'Off'}
    </button>
  );
}

Switch

This code demonstrates how to create a switch component using the useSwitch hook from @react-aria/toggle. The switch toggles between 'On' and 'Off' states.

import { useSwitch } from '@react-aria/switch';
import { useToggleState } from '@react-stately/toggle';

function Switch(props) {
  let state = useToggleState(props);
  let ref = React.useRef();
  let { inputProps } = useSwitch(props, state, ref);

  return (
    <label>
      <input {...inputProps} ref={ref} />
      {state.isSelected ? 'On' : 'Off'}
    </label>
  );
}

Other packages similar to @react-aria/toggle

FAQs

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