-
-
Save nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c to your computer and use it in GitHub Desktop.
| import { useCallback, useState } from 'react'; | |
| // Usage | |
| function App() { | |
| // Call the hook which returns, current value and the toggler function | |
| const [isTextChanged, setIsTextChanged] = useToggle(); | |
| return ( | |
| <button onClick={setIsTextChanged}>{isTextChanged ? 'Toggled' : 'Click to Toggle'}</button> | |
| ); | |
| } | |
| // Hook | |
| // Parameter is the boolean, with default "false" value | |
| const useToggle = (initialState = false) => { | |
| // Initialize the state | |
| const [state, setState] = useState(initialState); | |
| // Define and memorize toggler function in case we pass down the comopnent, | |
| // This function change the boolean value to it's opposite value | |
| const toggle = useCallback(() => setState(state => !state), []); | |
| return [state, toggle] | |
| } |
| import { useCallback, useState } from 'react'; | |
| // Usage | |
| function App() { | |
| // Call the hook which returns, current value and the toggler function | |
| const [isTextChanged, setIsTextChanged] = useToggle(); | |
| return ( | |
| <button onClick={setIsTextChanged}>{isTextChanged ? 'Toggled' : 'Click to Toggle'}</button> | |
| ); | |
| } | |
| // Hook | |
| // Parameter is the boolean, with default "false" value | |
| const useToggle = (initialState: boolean = false): [boolean, any] => { | |
| // Initialize the state | |
| const [state, setState] = useState<boolean>(initialState); | |
| // Define and memorize toggler function in case we pass down the comopnent, | |
| // This function change the boolean value to it's opposite value | |
| const toggle = useCallback((): void => setState(state => !state), []); | |
| return [state, toggle] | |
| } |
https://gist.github.com/nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c#file-use-toggle-example-ts-L21
Another small typo, "change" should be "changes"
Typos in comment
https://gist.github.com/nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c#file-use-toggle-example-ts-L20
component
why not just use useReducer
const useToggle = (initialState = false)=> {
return useReducer(state => !state, initialState);
}Fix the typo from
// Define and memorize toggler function in case we pass down the comopnent,
to
// Define and memorize toggler function in case we pass down the component,
And on the line after that:
// This function change the boolean value to it's opposite value
to
// This function changes the boolean value to its opposite value
While setState(state => !state) is valid. It violated the rule "no-shadow" of Eslint : https://eslint.org/docs/rules/no-shadow
The variable name state should be changed.
The typo, comopnent component, seems to be fixed in the .jsx, but not the .ts
// Define and memorize toggler function in case we pass down the comopnent
setIsTextChanged is imo a bad name for toggler function. toggleIsTextChanged would be better.
https://gist.github.com/nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c#file-use-toggle-example-ts-L16
It's not necessary to put type there. You already have predefined value.