react-day-and-night-toggle
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.18 • Public • Published

    react-day-and-night-toggle

    🌞Day & Night🌛 (light/dark) theme switch with pretty cool animation for React.

    Made a React component from Da_Woodhead codepen.

    Live demo

    A demo is worth a thousand words

    Installation

    Using npm:

    npm install react-day-and-night-toggle

    Using yarn:

    yarn add react-day-and-night-toggle

    Usage

    import React, { useState } from 'react'
    import DayNightToggle from 'react-day-and-night-toggle'
    
    const App = () => {
      const [isDarkMode, setIsDarkMode] = useState(false)
    
      return (
        <DayNightToggle
          onChange={() => setIsDarkMode(!isDarkMode)}
          checked={isDarkMode}
        />
      )
    }

    Props

    Prop Type Default Required Description
    onChange function yes Callback for when the switch is checked, use this to set your state.
    checked boolean yes The state of the switch is passed here.
    size number 32 no The size of the button that corresponds to its height (it is recommended to use an even integer number). The passed number will be automatically rounded down to the lowest integer.
    startInactive boolean false no The button is disabled for 2 seconds after rendering (this can come in handy when some theme is enabled and your site is loading styles, and you don't want the user to change the theme during this).
    animationInactive boolean true no The button is disabled after being pressed during animation (that's 2 seconds).
    shadows boolean true no A shadow, dark at "day" mode and light at "night" mode, around the button.
    className string undefined no Your own classnames.

    License

    MIT © carrymisss

    Install

    npm i react-day-and-night-toggle

    DownloadsWeekly Downloads

    13

    Version

    1.0.18

    License

    MIT

    Unpacked Size

    71.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • carrymisss