Toggle switch
El interruptor es un botón que muestra dos opciones exclusivas, On/Off.
Apagado | Encendido | En funcionamiento |
Props
active | Recibe un valor booleano que indica el estado del switch. Cuando recibe true el switch estará encendido y viceversa. |
handleToggle | Recibe una función que será ejecutada cuando se haga clic el el switch. |
Ejemplos
implementando un Switch con useState
Para implementar el switch declaramos primero una variable de estado con useState. Esta variable será de tipo booleano.
const [active, setActive] = useState(false);Ahora llamamos al componente Switch y le pasamos las props que necesita para su funcionamiento.
<ToggleSwitch
active={active}
handleToggle={() => setActive(!active)}
/>Nota la forma en que se le pasa la propiedad handleToggle. En este caso esta recibiendo una arrow function que alterna el valor de la variable active al ser llamada.