# react-fb-image-video-grid

> Image-video library which displays them in beautiful grids.

Latest version **0.1.10** (published 2022-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-fb-image-video-grid
pnpm add react-fb-image-video-grid
yarn add react-fb-image-video-grid
bun add react-fb-image-video-grid
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2022-10-26 |
| First published | 2022-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 135.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | sai6855 |
| Maintainers | roxiler-systems |
| Keywords | react, react-component, grid, image, images, video, videos, photo, photos, lightbox, gallery, js, jsx, javascript, tags, react-image-grid, react-component-gallery,  react-grid,  react-gallery,  react-video-grid,  react-image-video-grid,  react-fb-image-video-grid,  fb,  facebook,  google,  google-photos,  meta,  flex,  flexbox |

## Links

- npm: https://www.npmjs.com/package/react-fb-image-video-grid
- Repository: https://github.com/Roxiler/react-fb-image-video-grid
- Homepage: https://github.com/Roxiler/react-fb-image-video-grid#readme
- Issues: https://github.com/Roxiler/react-fb-image-video-grid/issues
- npm.io page: https://npm.io/package/react-fb-image-video-grid

## Dependencies (1)

- [react-modal](https://npm.io/package/react-modal.md) ^3.14.4

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.10 (latest) — 2022-10-26
- 0.1.9 — 2022-08-25
- 0.1.8 — 2022-06-15
- 0.1.7 — 2022-03-17
- 0.1.6 — 2022-03-16
- 0.1.5 — 2022-03-02
- 0.1.4 — 2022-02-19
- 0.1.3 — 2022-02-19
- 0.1.2 — 2022-02-19
- 0.1.1 — 2022-02-17
- 0.1.0 — 2022-02-17

## README

Image-video library which displays them in beautiful grids.

# Table of contents

1. [Installation](#installation)
2. [Demo](#demo)
3. [Basic Usage](#basic-usage)

# Installation

- Using NPM
  `npm i react-fb-image-video-grid`

- Using Yarn
  `yarn add react-fb-image-video-grid`

# Demo

https://codesandbox.io/s/react-fb-image-video-grid-forked-qoq6tt

# Code example

https://github.com/Roxiler/react-fb-image-video-grid/blob/main/example/index.tsx

## Checkout below gif.

![](https://media.giphy.com/media/o0vQSM2HbuWRa7e0CK/giphy.gif)

# Basic Usage of Image Grid

- For image grid of 1 image with modal

  ```
  import {ImageGrid} from "react-fb-image-video-grid"

   <ImageGrid>
           <img
             alt="ig"
             src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
           />
   </ImageGrid>
  ```

- For image grid of 5 images with modal

  ```
  import {ImageGrid} from "react-fb-image-video-grid"

   <ImageGrid>
           <img
             alt="ig"
             src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
           />
           <img
             alt="ig"
             src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
           />
           <img
             alt="ig"
             src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg"
           />
           <img
             alt="ig"
             src="https://thumbs.dreamstime.com/b/imagination-girl-kiss-lion-love-nature-abstract-concept-young-steals-male-wildlife-children-like-to-imagine-play-129595579.jpg"
           />
           <img
             alt="ig"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQg45jUi84SYeCf4uNAaprS7aoKzS8AohaLwQ&usqp=CAU"
           />
   </ImageGrid>
  ```

  - For image grid of 1 image without modal

  ```
  import {ImageGrid} from "react-fb-image-video-grid"

   <ImageGrid showModal={false}>
           <img
             alt="ig"
             src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
           />
   </ImageGrid>
  ```

- For image grid of 5 images without modal

  ```
  import {ImageGrid} from "react-fb-image-video-grid"

   <ImageGrid showModal={false}>
           <img
             alt="ig"
             src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
           />
           <img
             alt="ig"
             src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
           />
           <img
             alt="ig"
             src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547__340.jpg"
           />
           <img
             alt="ig"
             src="https://thumbs.dreamstime.com/b/imagination-girl-kiss-lion-love-nature-abstract-concept-young-steals-male-wildlife-children-like-to-imagine-play-129595579.jpg"
           />
           <img
             alt="ig"
             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQg45jUi84SYeCf4uNAaprS7aoKzS8AohaLwQ&usqp=CAU"
           />
   </ImageGrid>
  ```

# Basic Usage of Video Grid

- For video grid of 1 video with modal

  ```
  import {VideoGrid} from "react-fb-image-video-grid"

   <VideoGrid>
           <source
                type="video/mp4"
                src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"
              />
   </VideoGrid>
  ```

- For image grid of 2 images with modal

  ```
  import {VideoGrid} from "react-fb-image-video-grid"

   <VideoGrid>

            <video controls>
              <source
                type="video/mp4"
                src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"
              />
            </video>
            <video controls>
              <source
                type="video/mp4"
                src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"
              />
            </video>

   </VideoGrid>
  ```

  - For video grid of 1 video without modal

  ```
  import {VideoGrid} from "react-fb-image-video-grid"

   <VideoGrid showModal={false}>
          <source
                type="video/mp4"
                src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"
              />
   </VideoGrid>
  ```

- For image grid of 2 images without modal

  ```
  import {VideoGrid} from "react-fb-image-video-grid"

   <VideoGrid showModal={false}>

            <video controls>
              <source
                type="video/mp4"
                src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"
              />
            </video>
            <video controls>
              <source
                type="video/mp4"
                src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"
              />
            </video>

   </VideoGrid>
  ```

  ## props

| Accepted props | type    | Description                                                                         |
| -------------- | ------- | ----------------------------------------------------------------------------------- |
| showModal      | boolean | set showModal to true if you want to show the modal when user clicks on image/video |

---
_Source: https://npm.io/package/react-fb-image-video-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._