0.1.8 • Published 11 months ago
react-day-theme-toggle v0.1.8
$ npm install -s react-day-theme-toggle
Using yarn:
$ yarn install -s react-day-theme-toggle
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(
<React.StrictMode>
<ThemeContextProvider>
<App/>
</ThemeContextProvider>
</React.StrictMode>
);
import {useThemeContext} from "react-day-theme-toggle/ThemeContextProvider";
function App() {
const {theme, setTheme} = useThemeContext()
return (
<div>
{theme}
</div>
);
}
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.
import React from 'react';
import DayNightToggle from "react-day-theme-toggle/DayNightToggle";
const Header = () => {
return (
<div>
<DayNightToggle style={"classic"}/>
</div>
);
};
export default Header;
0.1.8
11 months ago
0.1.7
11 months ago
0.1.6
11 months ago
0.1.5
11 months ago
0.1.4
12 months ago
0.1.3
12 months ago
0.1.2
12 months ago
0.1.1
12 months ago
0.1.0
12 months ago
0.0.9
12 months ago
0.0.8
12 months ago
0.0.7
12 months ago
0.0.6
12 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.1
12 months ago