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