useToggle Hook

Easy

Create a custom useToggle hook for managing boolean state. Requirements: ✓ Implement useToggle hook that manages a boolean value ✓ Hook should return an array: [value, toggle] ✓ toggle function should invert the current value ✓ Initial value should be configurable (default false) ✓ Demonstrate usage with practical example Acceptance Criteria: ✓ useToggle accepts initialValue (optional) and returns [value, toggle] ✓ toggle changes value from true to false and vice versa ✓ Hook can be used to control element visibility ✓ Example shows multiple use cases of the hook ✓ Clean and reusable code

useToggle Hook

Easy

Close file
Close file
import { useState } from 'react';
import './styles.css';

// Implement useToggle hook here
function useToggle(initialValue = false) {
  // Your code here
  return [initialValue, () => {}]; // Replace with correct implementation
}

export default function App() {
  const [isVisible, toggleVisible] = useToggle(false);
  const [isDarkMode, toggleDarkMode] = useToggle(false);

  return (
    <div className={`app ${isDarkMode ? 'dark' : ''}`}>
      <h1>useToggle Hook</h1>

      <div className="controls">
        <button onClick={toggleVisible}>
          {isVisible ? 'Hide' : 'Show'} Content
        </button>
        <button onClick={toggleDarkMode}>
          {isDarkMode ? 'Light' : 'Dark'} Mode
        </button>
      </div>

      {isVisible && (
        <div className="content">
          <p>This content can be toggled!</p>
        </div>
      )}
    </div>
  );
}

Preview

Console