React modal component
simple react modal component without any style
Basic usage
import Modal from 'modalix'
const Component = () => {
const [open, setOpen] = useState(false)
return (
<>
<button onClick={() => setOpen(true)}>open modal</button>
<Modal visible={open}>
<h2>Hello</h2>
<button onClick={() => setOpen(false)}>close</button>
</Modal>
</>
)
}
Props
boolean
(default: false)
visible: prop to change modal state
<Modal visible={false} />
string
(default: div)
as: prop to change element type
<Modal as="form" />
() => void
(default: undefined)
onClickOut: prop to handle outside modal
<Modal onClickOut={() => setOpen(false)} />
CSSProperties
parentStyle: prop to change wrapper style
// default style for wrapper
const style = {
width: '100%',
height: '100vh',
position: 'fixed',
top: 0,
left: 0,
zIndex: 9999,
display: 'grid',
placeContent: 'center',
background: 'rgba(0,0,0,0.8)',
}
// example with overriding parent style
<Modal parentStyle={{ background: 'red' }} />
// output
{
width: '100%',
height: '100vh',
position: 'fixed',
top: 0,
left: 0,
zIndex: 9999,
display: 'grid',
placeContent: 'center',
background: 'red',
}
string
(default: Modal)
label: prop to change aria-label
<Modal label="LoginModal" />