react-3switch

A simple and minimal functional React component for toggle switches that supports simple two state input and three state input. Hence the name, react-three-state-switch. Since this is nothing more than a button, no extra dependencies are required, and it will stay that way.

Project would always be promptly updated to reflect any breaking changes in React.

Usage

The module is available on npm.

npm install react-3switch

This would install the component itself, the styles and TypeScript declarations.

Its advised to import the default styling.

// Either one depending on your requirements. scss files are also provided.
import "react-3switch/styles.css"; // esm
require("react-3switch/styles.css"); // cjs

If you want to override the default styling with your own custom ones, you can target the default classes .r3s-toggleContainer and .r3s-toggle or the className provided as a prop. Note that most appearance values are set in css variables which could be overriden.

| Variable | Description | |----------------------|---------------------------------------------------------------------------------------| | --widget-dimension | The parent container dimensions. The width is dynamically calculated. | | --button-dimension | The button dimension, technically the diameter of the circular button. | | --animation-duration | Duration for state transition animations. The color and button movement are animated. |

The component itself behaves as a controlled input with the state being handled by the parent. So the usage is identical to normal HTML inputs.

import {Toggle, ToggleState} from "react-3switch";

function Component() {
    const [toggleState, setToggleState] = useState<ToggleState>(ToggleState.INACTIVE);
    return (
        <Toggle value={toggleState} onChange={setToggleState} />
    );
}

Available Props

NOTE: ToggleState is a TypeScript enum which is an incrementing numerical value. If you are using JavaScript, the values should be replaced by the numerical value, but it's recommended to use TypeScript to not lose any typing information.

enum ToggleState {
    OFF, // 0
    INACTIVE, // 1
    ON, // 2
};

| Name | Type | Description | |--------------|-----------------------------------|------------------------------------------------------------------| | id? | string | OPTIONAL container id attribute. | | className? | string | OPTIONAL container class attribute. | | onChange | (newState: ToggleState) => void | Value change handler provided by the parent to update the state. | | value | ToggleState | The current value provided by the parent. | | isBoolean | boolean | false by default, true if the switch is two-state. |

Contributing

If you need to make changes and are interested in sharing those changes, feel free to open a pull request, which would be responded to promptly. General information can be found at CONTRIBUTING.md. In addition, this component is safe for use in Server Side Rendered applications, so no unsafewindow and document usage which can break SSR.