Light box with React components
The light box items are child React components.
import { useState } from 'react';
import { LightBox } from '@citizensadvice/react-dialogs';
function Item({ children }) {
return children;
}
export function Example() {
const [show, setShow] = useState();
const [index, setIndex] = useState(0);
return (
<>
<button
type="button"
onClick={() => setShow(!show)}
aria-expanded={show}
aria-haspopup="dialog"
>
Toggle
</button>
{show && (
<LightBox
onClose={() => setShow(false)}
onChangeIndex={setIndex}
index={index}
>
<Item title="Item 1">
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Item>
<Item title="Item 2">
<p>
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Item>
<Item title="Item 3">
<p>
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Item>
<Item title="Item 4">
<p>
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Item>
<Item title="Item 5">
<p>
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</Item>
</LightBox>
)}
</>
);
}