TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    @kekalma/switch for React

    A flexible switch component for React, where you can change the look freely. The actual state can be stored in a context, whose value can be used in other parts of the project and/or you can use a callback handler.
    Part of the @kekalma component family.

    Usage example

    The following example demonstrates the use of three independent switches, with separate context values, standalone and shared handler functions.
    It is optional to set up a context and/or a handler function, but one of them should be used.
    If an 'id' is set, the switchHandler callback function gets the 'id' parameter too.


    switch # context handler id
    1 Context1 switchHandler1(newValue)
    2 Context2 switchHandler(newValue,id) switch2
    3 switchHandler(newValue,id) switch3


    import React, { useState } from 'react'
    import {Switch} from "@kekalma/switch"
    import { switchContext1 as Context1} from "./context";
    import { switchContext2 as Context2} from "./context";
    import Info from "./Info";
    export default function App() {
      const [switchMode1, setSwitchMode1] = useState(false);
      const [switchMode2, setSwitchMode2] = useState(false);
      const switchHandler1 = (newValue: boolean) => {
        console.log('Switch state 1:', newValue)
      const switchHandler = (newValue: boolean, id: string) => {
        console.log(`Switch state '${id}' :`, newValue)
      return (
        <div style={{ display: "flex", flexWrap: "wrap" }}>
            value={{ switchMode: switchMode1, setSwitchMode: setSwitchMode1 }}
            <Info context={Context1}/>
          <div style={{flexBasis: "100%", height: "10px" }}></div>
            value={{ switchMode : switchMode2, setSwitchMode : setSwitchMode2 }}
            <Info context={Context2}/>
          <div style={{ flexBasis: "100%", height: "10px" }}></div>


    Please note, the content of the context should have strict a switchMode and setSwitchMode value-pair, in the format in the example below!

    import React from 'react'
    import { switchContextType }  from '@kekalma/switch'
    export const switchContext1 = React.createContext<switchContextType>({
      switchMode: false,
      setSwitchMode: (value: boolean)=>{}
    export const switchContext2 = React.createContext<switchContextType>({
      switchMode: false,
      setSwitchMode: (value: boolean)=>{}


    This is an example of how you can use the context value, destructed into an own variable, switchValue.

    import React, { useContext } from "react";
    import { switchContextType } from "@kekalma/switch";
    type myProps = { context: React.Context<switchContextType> };
    export default function Info(props : myProps) {
      const { switchMode : switchValue } = useContext(props.context);
      return (
          <span style={{ margin: "0 5px" }}>
            {switchValue ? "on" : "off"}

    Property parameters

    All the property parameters are optional, but one from onSwitch or context should be used.

    property format Description
    id string Identifier for the onSwitch callback function. Should only be used if multiple components are using the same handler function. See the example code.
    onSwitch Function
    (newValue: boolean, id?: string)
    The handler function for the change event.
    context React.Context
    The context, to store the state and the handler. See the above context.ts example for the format.
    label string The label in <span> element before the switch.
    initialValue boolean [FALSE] The initial value upon creation of the component.
    height string CSS value of the height.
    width string CSS value of the width. This should be omitted.
    borderON string (Optiona) CSS value the border color if switched on.
    borderOFF string (Option) CSS value the border color if switched off.
    colorON string CSS value the knob color if switched on.
    colorOFF string CSS value the knob color if switched off.
    bgColorON string CSS value the background color if switched on.
    bgColorOFF string CSS value of the background color if switched off.
    switchStyle React.CSSProperties General inline CSS properties for the switch.
    knobStyle React.CSSProperties General inline CSS properties for the knob.

    An example for using the style properties:


        //... main properties come here
        height = "1em"
        width = "1.7em"
        borderON = "#afa"
        colorON = "#6f6"
        bgColorON = "#dfd"
        switchStyle = {{ borderWidth: "3px" }}
        knobStyle = {{ borderRadius: 0 }}

    Exported type definitions (Typescript)

    exported item Description
    switchProps All the properties listed above
    switchContextType Context type definition


    Version What's new, description
    1.0.0 First official, working release.
    1.0.1 Cleaning the dependencies in code.


    MIT © kissato70

    Support the project >>> Donation


    npm i @kekalma/switch

    DownloadsWeekly Downloads






    Unpacked Size

    14.2 kB

    Total Files


    Last publish


    • kissato70