React-dark-mode-switch NPM

react-dark-mode-switch

fancy checkbox to do whatever but styles as dark mode switch

Install

npm install --save react-dark-mode-switch

Default look

Farmers Market Finder Demo

Usage

import React, { Component } from 'react'
import DarkModeToggle from 'react-dark-mode-switch'
const darkModeClass="darkMode"

export default class App extends Component {
    state = {
    darkMode: false
  }

  toggleChecked = (event) => {
    this.setState({ darkMode: event.target.checked });
  }
  render() {
    return (
      <div className={`App ${this.state.darkMode? darkModeClass: ""}`}>
        DARK MODE TEST
        <DarkModeToggle
          /* required */
          toggleChecked={this.toggleChecked}
          isChecked={this.state.darkMode} 
          /* optional working default values are provided */
          darkLabel="dark" 
          lightLabel="light" 
          activeClass="darkActive"
          id="darkModeToggle" 
        />
      </div>
    )
  }
}

Props

Prop	Type	Required	Description
isChecked	Boolean	✓	Value of checkbox
toggleChecked	Function	✓	Function to change isChecked. Does actually get you the event value event.target.checked
id	String		Pass your own id to the container. Preferably use this to apply your own styles since it overwrites the intern styles without !important
className	String		Pass your own className to the wrapper
activeClass	String		ClassName that gets added to the container when isChecked is true (default "DMT_Active")
className	String		Can be used to add your own className to parent component
darkLabel	String		String that gets displayed in the left half of the container (default "dark")
lightLabel	String		String that gets displayed in the right half of the container (default "light")

License

MIT © https://github.com/kantimam

@infinitebrahmanuniverse/nolb-react-da @everything-registry/sub-chunk-2549 @zalastax/nolb-react-da

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago