New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

react-toggle

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install
r

react-toggle

An elegant, accessible toggle component for React. Also a glorified checkbox.

4.1.3
latest
Version published
Maintainers
8
Created
Issues
70

What is react-toggle?

The react-toggle package is a React component that provides a highly customizable toggle switch. It is used to create toggle buttons that can switch between two states, such as on/off or true/false. The package is lightweight and easy to integrate into any React application.

What are react-toggle's main functionalities?

Basic Toggle

This code demonstrates a basic toggle switch using the react-toggle package. The toggle is initially set to the 'off' state.

import React from 'react';
import Toggle from 'react-toggle';
import 'react-toggle/style.css';

function App() {
  return (
    <div>
      <label>
        <Toggle defaultChecked={false} />
        <span>Toggle me</span>
      </label>
    </div>
  );
}

export default App;

Custom Icons

This code demonstrates how to use custom icons for the toggle switch. The toggle shows a moon icon when checked and a sun icon when unchecked.

import React from 'react';
import Toggle from 'react-toggle';
import 'react-toggle/style.css';

function App() {
  return (
    <div>
      <label>
        <Toggle
          defaultChecked={true}
          icons={{
            checked: <span>🌜</span>,
            unchecked: <span>🌞</span>
          }}
        />
        <span>Toggle with custom icons</span>
      </label>
    </div>
  );
}

export default App;

Disabled Toggle

This code demonstrates a disabled toggle switch. The toggle is set to the 'on' state and cannot be changed by the user.

import React from 'react';
import Toggle from 'react-toggle';
import 'react-toggle/style.css';

function App() {
  return (
    <div>
      <label>
        <Toggle defaultChecked={true} disabled={true} />
        <span>Disabled toggle</span>
      </label>
    </div>
  );
}

export default App;

Other packages similar to react-toggle

FAQs

Package last updated on 16 Jul 2022

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