moon-phase-widget
v1.5.1
Published
Moon phase widget for website
Downloads
23
Maintainers
Readme
Features
- Auto Geo detection
- Moon phase name and image
- Moon set and moon rise time
- Moon zodiac sign
- Super small size (This will not affect the speed of your site)
- Ability to change the background color
- 3 different styles (normal, small, horizontal)
How To Install (Easy way)
The easiest way to install the widget is by using CDN
Just copy the code below and paste it where you want to see the widget.
<div id="moon-phase-widget" data-color="white"></div>
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/build/automount.min.js">
</script>
Thats all.
If you want you can change the background color by adding your value to data-color
attribute.
Text white
or hex value #FFFFFF
Also, you can choose from different styles of the widget (By adding specific value to data-style
).
Normal (default style)
Small:
<div id="moon-phase-widget" data-color="white" data-style="small"></div>
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/build/automount.min.js">
</script>
Horizontal orientation:
<div id="moon-phase-widget" data-color="white" data-style="horizontal"></div>
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/build/automount.min.js">
</script>
Usage via npm
Install package:
npm install moon-phase-widget
Import code and styles (if you want):
import { MoonPhaseWidget } from 'moon-phase-widget'
import 'moon-phase-widget/src/index.css'
new MoonPhaseWidget('some-element-id')
Contacts
More information about moon phase you can find here
Fill free to contact me if you need help with customization or installation.