# @dinethpiyumantha/react-image-grid-gallary

> JS library for easialy create a image gallary

Latest version **1.0.0** (published 2021-11-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dinethpiyumantha/react-image-grid-gallary
pnpm add @dinethpiyumantha/react-image-grid-gallary
yarn add @dinethpiyumantha/react-image-grid-gallary
bun add @dinethpiyumantha/react-image-grid-gallary
```

Provides the command `react-image-grid-gallary`.

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-11-12 |
| First published | 2021-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 30.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | dinethpiyumantha |
| Maintainers | dinethpiyumantha |
| Keywords | image gallery, image, gallery, grid, image grid gallery |

## Links

- npm: https://www.npmjs.com/package/@dinethpiyumantha/react-image-grid-gallary
- Repository: https://github.com/dinethpiyumantha/react-image-grid-gallary
- Homepage: https://github.com/dinethpiyumantha/react-image-grid-gallary#readme
- Issues: https://github.com/dinethpiyumantha/react-image-grid-gallary/isuues
- npm.io page: https://npm.io/package/@dinethpiyumantha/react-image-grid-gallary

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2021-11-12

## README

# react-image-grid-gallary

> This React Component displays an image gallery using CSS Grid.

[![NPM](https://img.shields.io/npm/v/react-image-grid-gallary.svg)](https://www.npmjs.com/package/react-image-grid-gallary) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)


## Install
```bash
npm install --save react-image-grid-gallary
```

## Usage
#### Import resources
```jsx
import Image1 from './assets/1.jpg'
import Image2 from './assets/2.jpg'
```
</br>

#### Using component wise 
<p> Using this way, you can add images seperatly. If you are wish to use a loop, the you can use this. </p>

```jsx
import React, { Component } from 'react'

import GalleryGrid, { GalleryImage } from 'react-image-grid-gallary'
import 'react-image-grid-gallary/dist/index.css'

class App extends Component {
  render() {
    return (
      <GalleryGrid cols={5} >
        <GalleryImage src={ Image1 } title="1 Lorem ipsum dolor sit amet" />
        <GalleryImage src={ Image2 } title="2 Lorem ipsum dolor sit amet" />
      </GalleryGrid>
    )
  }
}
```
</br>

#### Using as a list
<p>If you wish to add object list. You can use this way</p>
```jsx
import React, { Component } from 'react'

import { GalleryImageList } from 'react-image-grid-gallary'
import 'react-image-grid-gallary/dist/index.css'

class App extends Component {
  render() {
    return (
      <GalleryImageList 
          cols={3}
          imageList={[
            {src: Image2, title: "1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, dolorem!" },
            {src: Image1, title: "2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, dolorem!" }
          ]} 
        />
    )
  }
}
```

## License

MIT © [dinethpiyumantha](https://github.com/dinethpiyumantha)

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