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

react-toggle

Package Overview
Dependencies
Maintainers
8
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-toggle

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

  • 4.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
146K
increased by5.23%
Maintainers
8
Weekly downloads
 
Created

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

Keywords

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

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