A reusable dark mode functionality hook and customizable UI for React applications
npm install react-night-mode-hookbash
npm install react-night-mode-hook
`
Usage
$3
In your component:
`javascript
import React from "react";
import { DarkModeToggle, useDarkMode } from "react-night-mode-hook";
const { isDarkModeActive } = useDarkMode();
function App() {
return (
My App
);
}
export default App;
`
$3
In your component:
`javascript
import React from "react";
import { DarkModeToggle } from "react-night-mode-hook";
const { isDarkModeActive } = useDarkMode();
function App() {
return (
My App
);
}
export default App;
`
$3
Pass your custom UI component as a prop to DarkModeToggle:
`javascript
import React from "react";
import { DarkModeToggle } from "react-night-mode-hook";
const { isDarkModeActive } = useDarkMode();
const CustomDarkModeUI = ({ toggleHandler }) => (
);
function App() {
return (
My App
customUI={CustomDarkModeUI}
settings={{ brightness: 90, contrast: 80, sepia: 20 }}
/>
);
}
export default App;
``