Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
@radix-ui/react-switch
Advanced tools
@radix-ui/react-switch is a React component library that provides accessible and customizable switch components. These switches can be used to toggle between two states, such as on and off, and are designed to be highly customizable and accessible out of the box.
Basic Switch
This code demonstrates a basic switch component using @radix-ui/react-switch. The Switch.Root component is the container, and the Switch.Thumb component represents the draggable part of the switch.
import * as Switch from '@radix-ui/react-switch';
function BasicSwitch() {
return (
<Switch.Root>
<Switch.Thumb />
</Switch.Root>
);
}
Customizable Switch
This code shows how to customize the appearance of the switch by applying custom CSS classes. The 'custom-switch' and 'custom-thumb' classes can be defined in an external CSS file to style the switch and its thumb.
import * as Switch from '@radix-ui/react-switch';
import './switch.css';
function CustomSwitch() {
return (
<Switch.Root className="custom-switch">
<Switch.Thumb className="custom-thumb" />
</Switch.Root>
);
}
Controlled Switch
This example demonstrates a controlled switch component where the switch's state is managed by a React useState hook. The 'checked' prop is used to control the switch's state, and the 'onCheckedChange' prop is used to update the state.
import * as Switch from '@radix-ui/react-switch';
import { useState } from 'react';
function ControlledSwitch() {
const [isChecked, setIsChecked] = useState(false);
return (
<Switch.Root checked={isChecked} onCheckedChange={setIsChecked}>
<Switch.Thumb />
</Switch.Root>
);
}
react-switch is a lightweight switch component for React. It provides a simple API for creating toggle switches with customizable styles. Compared to @radix-ui/react-switch, react-switch is more lightweight but may lack some of the advanced accessibility features.
rc-switch is a React component for creating switch controls. It is part of the rc-components library and offers a range of customization options. While it provides similar functionality to @radix-ui/react-switch, it may not be as focused on accessibility.
react-toggle is a React component for creating highly customizable toggle switches. It offers a simple API and supports various customization options. Compared to @radix-ui/react-switch, react-toggle is more focused on providing a wide range of customization options.
react-switch
$ yarn add @radix-ui/react-switch
# or
$ npm install @radix-ui/react-switch
View docs here.
FAQs
Unknown package
We found that @radix-ui/react-switch demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 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
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.