Getting Started

What is ReactHalfmoon?

React components for Halfmoon, a front-end framework with a built-in dark mode.

Documentation

Installation

1. Install the package

npm i reacthalfmoon

If you see lot of vulnerabilities just run

npm audit fix

2. Add the css file

Using link

In public/index.html link the css file

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css" rel="stylesheet" />

Or using import

In App.css import the css file

@import url("https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css");

Usage

Button Component

import React from 'react';
import { Button } from 'reacthalfmoon';

function App() {
  return (
      <Button color="primary">Primary</Button>
  )
}

export default App

Darkmode

import React, {useState} from 'react';
import { DarkmodeSwitch } from 'reacthalfmoon';

function App() {
  const [darkmode, setDarkmode] = useState(false);
  return (
      <DarkmodeSwitch checked={darkmode} toggle={()=>{setDarkmode(!darkmode)}} />
  )
}

export default App