react-moon-toggle

Toggle dark mode (or anything) in moon phases emoji

Usage no npm install needed!

<script type="module">
  import reactMoonToggle from 'https://cdn.skypack.dev/react-moon-toggle';
</script>

README

react-moon-toggle

Toggle dark mode (or anything) in moon phases emoji

Usage

import React from "react";
import Toggle from "react-moon-toggle";

const app = () => {
  const [dark, setDark] = React.useState(false);

  return <Toggle {...{ dark, setDark }} />;
};

Installation

$ yarn add react-moon-toggle

Props

  • dark boolean (required)

  • setDark = (newDark: boolean) => null ?function

  • interval = 50 number

  • darkIndex = 0 number (0-7)

  • lightIndex = 4 number (0-7)

  • peekOnHover = true boolean

phases array used for indexes:

const phases = ["🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘"];

phases array used for indexes:

const phases = ["🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘"];

Any other props will be given directly to the <button> element.

License

MIT