@kekalma/switch v1.0.1

@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.

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.

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)

Changelog:

License

MIT © kissato70

Support the project >>> Donation