react-darkmode-toggler

Dark Mode Toggler, UI button for chaning theme

Usage no npm install needed!

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

README

react-darkmode-toggler

image

Made with create-react-library

NPM JavaScript Style Guide

Demo

Install

npm i react-darkmode-toggler

or

yarn add react-darkmode-toggler

Usage

import React, { useState } from 'react'

import { DarkModeToggler } from 'react-darkmode-toggler'

const App = () => {
  const [isDark, setIsDark] = useState<'light' | 'dark'>('light')

  // button toggler
  const darkModeHandler = () => {
    setIsDark(isDark === 'light' ? 'dark' : 'light')
  }

  return (
    <DarkModeToggler
      size='small'
      isDark={isDark}
      onClick={darkModeHandler}
      border='#000'
    />
  )
}

pushpin"> Props

| Props   | Types               | Default | Required |
| ------- | ------------------- | ------- | -------- |
| isDark  | `light` or `dark`   | 'light' | no       |
| onClick | func                | null    | yes      |
| size    | `middle` or `small` | no      | no       |
| border  | hex color           | #000    | no       |

License

MIT ©