# react-day-theme-toggle
> React Day Theme Toggle
Latest version **0.1.8** (published 2023-06-10) · ISC license · 0 weekly downloads
## Install
```sh
npm install react-day-theme-toggle
pnpm add react-day-theme-toggle
yarn add react-day-theme-toggle
bun add react-day-theme-toggle
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.8 |
| Published | 2023-06-10 |
| First published | 2023-05-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lucas Faugeron |
| Maintainers | mrlsultimate |
## Links
- npm: https://www.npmjs.com/package/react-day-theme-toggle
- npm.io page: https://npm.io/package/react-day-theme-toggle
## Dependencies (1)
- [react](https://npm.io/package/react.md) ^18.2.0
## Recent versions
- 0.1.8 (latest) — 2023-06-10
- 0.1.7 — 2023-06-10
- 0.1.6 — 2023-06-02
- 0.1.5 — 2023-06-02
- 0.1.4 — 2023-06-01
- 0.1.3 — 2023-06-01
- 0.1.2 — 2023-05-31
- 0.1.1 — 2023-05-31
- 0.1.0 — 2023-05-31
- 0.0.9 — 2023-05-30
- 0.0.8 — 2023-05-30
- 0.0.7 — 2023-05-30
- 0.0.6 — 2023-05-30
- 0.0.5 — 2023-05-30
- 0.0.4 — 2023-05-30
- … 3 more at https://npm.io/package/react-day-theme-toggle/versions
## README
React Day Theme Toggle
A beautiful day / night theme toggle with his context for your react application
Versions
NPM : 9.6.7
Dependencies
React : 18.2.0
Installing
Using npm:
$ npm install -s react-day-theme-toggle
Using yarn:
$ yarn install -s react-day-theme-toggle
Working with it
The module exports a component called ThemeContextProvider, that has to wrap your application and provides those two values : {theme, setTheme}, the theme value is a boolean and can be false (for day) / true (for night).
So first, wrap your app inside the component ThemeContextProvider.
```js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import {ThemeContextProvider} from "react-day-theme-toggle/ThemeContextProvider";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
```
Then you can access the values of the theme state with the custom hook useThemeContext
```js
import {useThemeContext} from "react-day-theme-toggle/ThemeContextProvider";
function App() {
const {theme, setTheme} = useThemeContext()
return (
{theme}
);
}
export default App;
```
Finally use the component DayNightToggle to display a nice toggle in your header or somewhere else.
We will be allowing you to choose different style versions of the toggle in next versions.
Beware to wrap the component in a div, the toggle will take 100% of its parent width.
```js
import React from 'react';
import DayNightToggle from "react-day-theme-toggle/DayNightToggle";
const Header = () => {
return (
);
};
export default Header;
```
Styles
Default
use this props : style={"classic"}
Desert
use this props : style={"desert"}
Minimalist
use this props : style={"minimalist"}
Second Minimalist
use this props : style={"second_minimalist"}
---
_Source: https://npm.io/package/react-day-theme-toggle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._