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
visible: boolean (default: false)
prop to change modal state
<Modal visible={false} />as: string (default: div)
prop to change element type
<Modal as="form" />onClickOut: () => void (default: undefined)
prop to handle outside modal
<Modal onClickOut={() => setOpen(false)} />parentStyle: CSSProperties
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',
}label: string (default: Modal)
prop to change aria-label
<Modal label="LoginModal" />