Breaking News: Grepper is joining You.com. Read the official announcement!

useToggle react hook

Add Answer

Mehedi Islam Ripon answered on December 16, 2021 Popularity 6/10 Helpfulness 4/10

answer useToggle react hook

related react hook toggle state

related toggle hook react

useToggle react hook

Comment

import { Dispatch, SetStateAction, useCallback, useState } from 'react'

function useToggle(
  defaultValue?: boolean,
): [boolean, () => void, Dispatch<SetStateAction<boolean>>] {
  const [value, setValue] = useState(!!defaultValue)

  const toggle = useCallback(() => setValue(x => !x), [])

  return [value, toggle, setValue]
}

export default useToggle

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: hook javascript

Link to this answer
Share Copy Link

Contributed on Feb 10 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

Closely Related Answers

react hook toggle state

Comment

// import React, { useState } from 'react';
const { useState } = React;

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: hook

Link to this answer
Share Copy Link

Contributed on Dec 16 2021

Drab Dingo

0 Answers Avg Quality 2/10

toggle hook react

Comment

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]
}

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: usehooks.com

Tags: hook javascript javascr

Link to this answer
Share Copy Link

Contributed on Feb 23 2022

Excited Eland

0 Answers Avg Quality 2/10

useToggle react hook

Contents

More Related Answers

useToggle react hook

Closely Related Answers

react hook toggle state

toggle hook react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.