Light box with objects
The light box items are an array of objects.
import { useState } from 'react';
import { LightBox } from '@citizensadvice/react-dialogs';
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}
>
{[
{
title: 'Item 1',
contents: (
<p>
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
),
},
{
title: 'Item 2',
contents: (
<p>
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
),
},
{
title: 'Item 3',
contents: (
<p>
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
),
},
{
title: 'Item 4',
contents: (
<p>
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</p>
),
},
]}
</LightBox>
)}
</>
);
}