Skip to content

Instantly share code, notes, and snippets.

@nikasepiskveradze
Created December 10, 2020 17:29
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
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]
}
@jhildensperger
Copy link

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

@ivxvm
Copy link

ivxvm commented Jun 13, 2022

setIsTextChanged is imo a bad name for toggler function. toggleIsTextChanged would be better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment