Rev 14230 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
const ToggleComponent = ({ setValue = function () { } }) => {
const [isActive, setIsActive] = useState(false)
useEffect(() => {
setValue(isActive)
}, [isActive])
return (
<div
className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
data-toggle="toggle"
role="button"
style={{ width: '130px' }}
onClick={() => setIsActive(!isActive)}
>
<input
type="checkbox"
checked={isActive}
/>
<div className="toggle-group">
<label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
<label htmlFor="status" className="btn btn-light toggle-off">Inactivo</label>
<span className="toggle-handle btn btn-light"></span>
</div>
</div>
)
}
export default ToggleComponent