react-moon

Moon component for React

Usage no npm install needed!

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

README

🌚 react-moon

Moon component for React

NPM

🌑🌒🌓🌔🌕🌖🌗🌘🌑

Install

npm install --save react-moon

Usage

import React from 'react';
import Moon from 'react-moon';

export default () => <Moon phase={0.16} size={128} />;

props

prop description type default
phase Moon phase from 0 to 1. Full moon is 0.5. Number 0.16
size Diameter in pixels Number 80
lightColor Color of the light side String white
darkColor Color of the dark side String black
border CSS value for border String 4px solid black
rotation CSS value for rotation <angle> String 0deg

Known issues

  • Size must be static and, if bigger, the moon will overflow its container