# r-lightbox

> A simple react lightbox component

Latest version **1.0.4** (published 2022-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install r-lightbox
pnpm add r-lightbox
yarn add r-lightbox
bun add r-lightbox
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-03-13 |
| First published | 2022-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 355.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nimamt |
| Maintainers | nimamt |

## Links

- npm: https://www.npmjs.com/package/r-lightbox
- npm.io page: https://npm.io/package/r-lightbox

## Dependencies (5)

- [@mui/material](https://npm.io/package/@mui/material.md) ^5.4.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.7.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.6.0
- [react-swipeable](https://npm.io/package/react-swipeable.md) ^6.2.0
- [react-zoom-pan-pinch](https://npm.io/package/react-zoom-pan-pinch.md) ^2.1.3

## Recent versions

- 1.0.4 (latest) — 2022-03-13
- 1.0.3 — 2022-03-13
- 1.0.2 — 2022-03-13
- 1.0.1 — 2022-03-13
- 1.0.0 — 2022-03-13

## README

# r-lightbox (based on v.1.0.3)

A simple lightbox made to work with the lastest version of <strong>react</strong> and <strong>typescript</strong>.  
Supports panning the images, zooming in, swiping left and right, and putting custom components on the right side of header and footer.

## How to provide Images?

```jsx
export interface LboxImage {
    src: string;
    description?: string;
    title?: string;
    secondaryTitle?: string;
}
```

The images prop is an array of LboxImages. The only mandatory field of the each LboxImage is the src.

## Other props

```jsx
export interface Props {
    open: boolean;
    images: LboxImage[];
    selectedIndex: number;
    setSelectedIndex: (newVal: number) => void;
    onClose: () => void;
    onChange?: (oldImg: LboxImage, newImg: LboxImage) => void;
    headerElement?: React.ReactNode;
    footerElement?: React.ReactNode;
}
```

**open:** Is the lightbox open?  
**selectedIndex:** Index of the selected image (Valid values are 0 up to and including images.length - 1)  
**setSelectedIndex:** The function that changes the selectedIndex (Called in the event of next/prev page)  
For example you could provide these:

```jsx
const [selectedIndex, setSelectedIndex] = useState(0);
```

**onClose:** Will be called when the close button is clicked.  
**onChanged:** Will be called when the image changes. It should have two parameters, namely the old image and the new image.  
**headerElement:** You can provide a custom component that will be put on the right side of the header.  
**footerElement:** You can provide a custom component that will be put on the right side of the footer.

## Example

https://nimamt.github.io/r-lightbox/  
The example project folder in this repository contains an example usage.  
The library is simple and not complex; most props are optional.

## 1 rem = 16px

If you set 1 rem = 10px then adjust by changing the font-size. (For the lightbox)  
For example wrap the lightbox with a div and change the font-size property.

---
_Source: https://npm.io/package/r-lightbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._