React-theme-toggle-button NPM

react-theme-toggle-button

Animated React component to invert the theme of React-based projects.

Status and support

✔ stable
✔ supported
✖ no ongoing development

Credit goes to Aaron Iker - he's the creator of the styles of this superb animated toggle button.

Install

npm

npm install --save react-theme-toggle-button

yarn

yarn add react-theme-toggle-button

Usage

import React, { useState } from "react";
import ToggleButton from "react-theme-toggle-button";
import "react-theme-toggle-button/dist/index.css";

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <ToggleButton isDark={isDark} onChange={() => setIsDark(prevIsDark => !prevIsDark)} />
  )
}

Caveats:

styles must be imported explicitly for now

Properties

Property	Description
`isDark`	Boolean value to set the `aria-label` and `title` attributes according to the theme.
`onChange`	Function to fire when the button is toggled.

Styling

The package leverages CSS properties in order for you to tailor the colors to suit your needs.

:root {
  --color-light-theme: aqua;
  --color-dark-theme: bisque;
}

Property	Default
`--color-light-theme`	`#eee`
`--color-dark-theme`	`#000`

Development

Refer to https://github.com/transitive-bullshit/create-react-library#development.

Put simply, launch two terminal windows/tabs:

npm run dev:package

npm run dev:example

Changes made to any of the running instances will live-reload the underlying dev server.

License

The project is available as open source under the terms of the MIT License.

theme toggle button react

@everything-registry/sub-chunk-2618 @infinitebrahmanuniverse/nolb-react-th @zalastax/nolb-react-th

1.1.0

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago