useToggle Hook

Легкая

Создайте custom hook useToggle для управления boolean состоянием. Требования: ✓ Реализовать хук useToggle, который управляет boolean значением ✓ Хук должен возвращать массив: [value, toggle] ✓ Функция toggle должна инвертировать текущее значение ✓ Начальное значение должно быть настраиваемым (по умолчанию false) ✓ Продемонстрировать работу на практическом примере Критерии приемки: ✓ useToggle принимает initialValue (опционально) и возвращает [value, toggle] ✓ toggle меняет значение с true на false и наоборот ✓ Хук можно использовать для управления видимостью элементов ✓ В примере показано несколько применений хука ✓ Код чистый и переиспользуемый

useToggle Hook

Легкая

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