Usage
import { Modal } from '@loomhq/lens'
<Modal title="Title>Content</Modal>
Modal with all elements
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} variant="primary">
Open Modal
</Button>
<Modal
mainButton={<Button variant="primary">Confirm</Button>}
secondaryButton={<Button>Cancel</Button>}
alternativeButton={<TextButton icon={<SvgAdd />}>Add</TextButton>}
title={demoText.short}
isOpen={isOpen}
onCloseClick={() => setIsOpen(!isOpen)}
onBackgroundClick={() => setIsOpen(!isOpen)}
>
{demoText.medium}
</Modal>
</>
)}
With dividers
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} variant="primary">
Open Modal
</Button>
<Modal
hasDividers
mainButton={<Button variant="primary">Confirm</Button>}
secondaryButton={<Button>Cancel</Button>}
alternativeButton={<TextButton icon={<SvgAdd />}>Add</TextButton>}
title={demoText.short}
isOpen={isOpen}
onCloseClick={() => setIsOpen(!isOpen)}
onBackgroundClick={() => setIsOpen(!isOpen)}
>
{demoText.alphabet.map((letter, index) => (
<Container
paddingTop="small"
paddingBottom="small"
borderSide="bottom"
key={index}
>{letter}</Container>
))}
</Modal>
</>
)}
Custom Modal with ModalCard
() => {
const [isOpen, setIsOpen] = React.useState()
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} variant="primary">
Open Modal
</Button>
<Backdrop
isOpen={isOpen}
onClick={() => setIsOpen(!isOpen)}
>
<ModalCard onCloseClick={() => setIsOpen(!isOpen)}>
<Container
padding="xlarge"
>
{demoText.veryLong}
</Container>
</ModalCard>
</Backdrop>
</>
)}
With scrollable section
() => {
const [isOpen, setIsOpen] = React.useState()
return (
<>
<Button onClick={() => setIsOpen(!isOpen)} variant="primary">
Open Modal
</Button>
<Backdrop
isOpen={isOpen}
onClick={() => setIsOpen(!isOpen)}
>
<ModalCard
onCloseClick={() => setIsOpen(!isOpen)}
maxWidth={72}
>
<Arrange rows={['1fr', 'auto']}>
<Container
overflow="auto"
maxHeight="100%"
padding="xlarge"
>
<Text size="large">
{demoText.veryLong}
</Text>
</Container>
<Container backgroundColor="highlight" padding="xlarge">
{demoText.medium}
</Container>
</Arrange>
</ModalCard>
</Backdrop>
</>
)}
Props
Modal
maxWidth
number | string
60
mainButton
React.ReactNode
secondaryButton
React.ReactNode
alternativeButton
React.ReactNode
onCloseClick
React.ReactEventHandler
onBackgroundClick
React.ReactEventHandler
onKeyDown
React.ReactEventHandler
ModalCard
maxWidth
number | string
60
onCloseClick
React.ReactEventHandler