Toggle Switch

Toggle switch button

The Toggle component is used for the regular toggle operation like switching between light and dark mode and so many others. The Toggle component can be imported like this

import { Toggle } from "@wigxel/react-components/lib/buttons";

The Toggle component comes in five (5) variations. The Rounded, Circle, Binary, Square, and Line variation.

The variations are distinguished by design, they all play the roll of a toggle button.

To use any of the variations the variation is attached to the name of the component as shown below.

import React from "react";

const ToggleButtons = () => {
    return (
        <div>
            <Toggle.Rounded 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Circle 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Binary 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Square 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
            <Toggle.Line 
                active={false} 
                onClick={() => console.log("clicked!!!")} 
            />
        </div>
    )
}

As seen above, the Toggle component accepts two properties, active and onClick. The active props accepts a boolean and it responsible for switching the component "on" an "off". the onClick props accepts a function which is used to which the boolean state in the active props.

The best way to switch the toggle component is using a state in a class based component or useState hooks in a functional component.