Hookpedia
Ctrl + K
Repositório no GitHub

useToggle

Compartilhar no Twitter

02 de dezembro de 2020

Gist
Sandbox

Basicamente, o que esse hook faz é, receber um parâmetro com um valor booleano e alternar esse valor para seu oposto. É útil quando queremos simular alguma ação para sua ação oposta, como por exemplo: Exibir e esconder modals, exibir mais ou menos texto, etc.

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 component,
  // This function change the boolean value to it's opposite value
  const toggle = useCallback(() => setState((state) => !state), []);

  return [state, toggle];
};

Criado por @guilherssousa, mantido por 1 pessoas 💗