Me gustaría crear un componente de botón personalizado que muestre una rueda giratoria de carga dentro de sí misma cuando se presiona y con una condición que se puede definir externamente que le indicará al botón que quite la rueda giratoria y vuelva a su apariencia original. Algo como esto:
<CustomButton type="button" className="btn btn-primary" stopSpinningWhen={condition} onClick={() => ...} > Click me </CustomButton>Actualmente, mis botones con un girador se ven así, lo cual está muy bien, pero es una molestia escribir códigos/estados repetitivos para cada botón:
const [buttonSpinner, setButtonSpinner] = useState(false); const onClickEvent = (ev) => { setButtonSpinner(true); if (condition) { setButtonSpinner(false); } }; return ( <button type="button" className="btn btn-primary" onClick={onClickEvent} disabled={buttonSpinner} > {buttonSpinner ? ( <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" ></span> ) : ( "Click me" )} </button> );Estoy usando React 17.0.2.
¿Es posible?
Puede crear su propio botón personalizado que recibe isLoading adicionalmente.
const Spinner = ( <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true" /> ) const CustomButton = (props) => ( <button type="button" className="btn btn-primary" onClick={props.onClick} disabled={props.isLoading} > {props.isLoading ? <Spinner /> : "Click me"} </button> ) const YourComponent = () => { const [isLoading, setIsLoading] = useState(false) const onClick = async (event) => { setIsLoading(true) doHeavyTask() setIsLoading(false) } return ( <div> <CustomButton isLoading={isLoading} onClick={onClick} /> </div> ) }Utiliza una propiedad de carga como su condición y simplemente la pasa como accesorio a su componente de botón personalizado. Algo como esto:
const myComponent = () =>{ const [loading, setLoading] = useState(false) const myFunc = async () = { setLoading(true) //call api or do seomthing, after the process finishes set loading to false again const resp = await fetch("myAPIURL") console.log(resp.data) setLoading(false) } return( <CustomButton type="button" className="btn btn-primary" spinning={loading} onClick={() => myFunc()} > Click me </CustomButton> ) }