useToggle

Cambia el estado entre valores dados.

Instalación

Instale el custom hook desde su terminal.

npm i @raddix/use-toggle

Uso

Para cambiar el estado entre valores dados agrega un array al hook useToggle.

El primer elemento de la matriz se utilizará de forma predeterminada como valor inicial; puede anular esto agregando el valor inicial deseado como segundo parámetro.

import { useToggle } from '@raddix/use-toggle';

export default function App() {
  const [color, toggle, setColor] = useToggle(['blue', 'orange', 'cyan']);

  return (
    <div>
      <button onClick={toggle}>{color}</button>
      <button onClick={() => setColor('blue')}>Set color blue</button>
      <button onClick={() => setColor('cyan')}>Set color cyan</button>
    </div>
  )
}

API

Parámetros

Nombre	Descripción	Requerido	Valor por defecto
values	Un array de valores	Yes	-	Array<T>
initValue	El valor inicial.	No	values[0]	T

Resultado

El hook useToggle devuelve un array con los siguientes elementos:

Índice	Descripción	Tipo
[0]	El valor actual del estado.	T
[1]	Una función para alternar el estado.	function
[2]	Una función para cambiar el estado.	function