Skip to content

Instantly share code, notes, and snippets.

@Hiweus
Last active July 23, 2023 04:47
Show Gist options
  • Save Hiweus/b8f4abcdd8b72986eed065a1f44e2c0f to your computer and use it in GitHub Desktop.
Save Hiweus/b8f4abcdd8b72986eed065a1f44e2c0f to your computer and use it in GitHub Desktop.
React components
import { useState } from 'react'
import { Button, Spinner } from 'react-bootstrap'
function AsyncButton({ onClick, children, externalLoading = false, ...props }) {
const [internalLoading, setInternalLoading] = useState(false)
const handleClick = async () => {
setInternalLoading(true)
await onClick?.()
setInternalLoading(false)
}
return (
<Button onClick={handleClick} disabled={internalLoading || externalLoading} {...props}>
{internalLoading || externalLoading ? <Spinner animation="border" size="sm" /> : children}
</Button>
)
}
function debouncer(fn, miliseconds) {
let timer = null
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => fn(...args), miliseconds)
}
}
import { useState } from 'react'
import { Modal } from 'react-bootstrap'
function FullModal({ children, title, show, onClose }) {
return (
<Modal show={show} fullscreen={true} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>{title}</Modal.Title>
</Modal.Header>
<Modal.Body>
{children}
</Modal.Body>
</Modal>
)
}
function useModal() {
const [show, setShow] = useState(false)
return [
show,
() => setShow(true),
() => setShow(false),
]
}
// USANDO OS COMPONENTES
function App() {
const [show1, open1, close1] = useModal()
const [show2, open2, close2] = useModal()
const [o, setO] = useState(null)
return (
<div>
<button onClick={() => {
open1()
open2()
setO({ nome: 'João' })
}}>
Travar
</button>
<FullModal title='Modal 1' show={show1} onClose={close1}>
<p>Conteúdo do modal 1</p>
<div>
Amigo estou aqui
</div>
</FullModal>
<FullModal title='Modal 2' show={show2} onClose={close2}>
{o && (
<>
<p>Conteúdo do modal 2</p>
<div>
Amigo estou aqui {o.nome}
</div>
</>
)}
</FullModal>
</div>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment