@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

App.tsx

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" }}>
      <Context1.Provider 
        value={{ switchMode: switchMode1, setSwitchMode: setSwitchMode1 }}
      >
        <Switch
          context={Context1}
          label="Switch1:"
          initValue={false}
          onSwitch={switchHandler1}
        />
        <Info context={Context1}/>
      </Context1.Provider>
      <div style={{flexBasis: "100%", height: "10px" }}></div>
      <Context2.Provider 
        value={{ switchMode : switchMode2, setSwitchMode : setSwitchMode2 }}
      >
        <Switch
          id="switch2"
          context={Context2}
          label="Switch2:"
          initValue={true}
          onSwitch={switchHandler}
        />
        <Info context={Context2}/>
      </Context2.Provider>
      <div style={{ flexBasis: "100%", height: "10px" }}></div>
      <Switch
          id="switch3"
          label="Switch3:"
          initValue={false}
          onSwitch={switchHandler}
      />
    </div>
  )
}

context.ts

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)=>{}
})

info.tsx

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 (
    <React.Fragment>
      <span style={{ margin: "0 5px" }}>
        {switchValue ? "on" : "off"}
      </span>
    </React.Fragment>
  );
}

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 <switchContextType>	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:

  <switch 
    //... 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

Changelog:

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

License

MIT © kissato70

Support the project >>> Donation