The following development is in REACT.
I'm using the use-dark-mode NPM package and I need some help with deploying it in a class component rather than a function.
Any method I tried, I would get the "Hook can only be called inside of the body function component" or it just doesn't work.
The examples they give are using react functions and say to deploy it as such:
import React from 'react';
import Toggle from './Toggle';
import useDarkMode from 'use-dark-mode';
const DarkModeToggle = () => {
const darkMode = useDarkMode(false);
return (
<div className="dark-mode-toggle">
<button type="button" onClick={darkMode.disable}>
☀
</button>
<Toggle checked={darkMode.value} onChange={darkMode.toggle} />
<button type="button" onClick={darkMode.enable}>
☾
</button>
</div>
);
};
export default DarkModeToggle;
I have attempted to deploy it as follows
import useDarkMode from 'use-dark-mode';
class settingsPlugin extends Component {
constructor(props) {
super(props);
this.state = {
classes: "dropdown",
isNightMode: false,
themeSpeed: 3
};
}
nightMode = () => {
useDarkMode(
false,
{
classNameDark: "night",
classNameLight: "light",
element: "main-body"
}
);
}
I'm just starting out to learn react so any guidance would be greatly appreciated.
Thanks, HK