https://github.com/mathdroid/react-moon-toggle

🌕🌑 Toggle and animate based on moon phases emoji
https://github.com/mathdroid/react-moon-toggle

Last synced: 5 days ago
JSON representation

🌕🌑 Toggle and animate based on moon phases emoji

• Host: GitHub
• URL: https://github.com/mathdroid/react-moon-toggle
• Owner: mathdroid
• Created: 2019-04-16T11:57:12.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-17T16:47:24.000Z (over 5 years ago)
• Last Synced: 2024-11-05T12:32:58.412Z (9 days ago)
• Language: JavaScript
• Homepage:
• Size: 1.15 MB
• Stars: 19
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# `react-moon-toggle`

> Toggle dark mode (or anything) in moon phases emoji



## Usage

```js

import React from "react";

import Toggle from "react-moon-toggle";

const app = () => {

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

  return ;

};

```

## Installation

```sh

$ 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:

```js

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

```

Any other props will be given directly to the `` element.

## License

MIT