# gallery-search

> gallery of photos with title search and modal window

Latest version **1.0.0** (published 2019-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install gallery-search
pnpm add gallery-search
yarn add gallery-search
bun add gallery-search
```

## 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 | 2019-05-01 |
| First published | 2019-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 3 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Author | dneprorog |
| Maintainers | dneprorog |

## Links

- npm: https://www.npmjs.com/package/gallery-search
- Repository: https://github.com/dneprorog/gallery-search
- Homepage: https://github.com/dneprorog/gallery-search#readme
- Issues: https://github.com/dneprorog/gallery-search/issues
- npm.io page: https://npm.io/package/gallery-search

## Dependencies (3)

- [axios](https://npm.io/package/axios.md) ^0.18.0
- [styled-components](https://npm.io/package/styled-components.md) ^4.2.0
- [rollup-plugin-json](https://npm.io/package/rollup-plugin-json.md) ^4.0.0

## Recent versions

- 1.0.0 (latest) — 2019-05-01

## README

# gallery-search

> gallery of photos with title search and modal window

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

## Install

```bash
npm install --save gallery-search
```

## Usage

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

import Gallery from 'gallery-search'

export default class App extends Component {
  render () {
    return (
      <Gallery
        backgroundInput={'#232733'}
        fontSizeInput={'20px'}
        isNoneSearch={true}

        widthCardItem={'160px'}
        backgroundCardItem={'#3a3b40'}
        colorCardItem={'cadetblue'}
        alignTextCardItem={'center'}

        backgroundModalWrap={'#0e0d0dab'}
        backgroundModal={'#232733'}
        colorModal={'#fff'}
        widthModal={'600px'}
        heightModal={'500px'}
        backgroundButtonModal={'red'}
        colorButtonModal={'#fff'}
        colorBorderButtonModal={'red'}
        widthButtonModal={'100%'}
        heightButtonModal={'40px'}
        isNoneModal={true}
      />
    )
  }
}
```

```bash
PROPS
  Gallery: 
    Available Properties
    backgroundInput - background input(search)
    fontSizeInput - font-size input(search)
    isNoneSearch - hidden input(search)
    
    widthCardItem - width card-item
    backgroundCardItem - background card-item
    colorCardItem - color card-item
    alignTextCardItem - align text card-item
    
    backgroundModalWrap - bacground modal wrap
    backgroundModal - bacground modal
    colorModal - color modal
    widthModal - width modal
    heightModal - height modal
    backgroundButtonModal - bacground button modal
    colorButtonModal - color button modal
    colorBorderButtonModal - color border button modal
    widthButtonModal - width button modal
    heightButtonModal - height button modal
    isNoneModal - hidden input(search)
    
    _______________________________________________________
    
    backgroundInput - String, default '#232733'
    fontSizeInput - String, default '20px'
    isNoneSearch - Boolean, default true
    
    widthCardItem - String, default '160px'
    backgroundCardItem - String, default '#3a3b40'
    colorCardItem - String, default 'cadetblue'
    alignTextCardItem - String, default 'center'
    
    backgroundModalWrap - String, default '#0e0d0dab'
    backgroundModal - String, default '#232733'
    colorModal - String, default '#fff'
    widthModal - String, default '600px'
    heightModal - String, default '500px'
    backgroundButtonModal - String, default 'red'
    colorButtonModal - String, default '#fff'
    colorBorderButtonModal - String, default 'red'
    widthButtonModal - String, default '100%'
    heightButtonModal - String, default '40px'
    isNoneModal - Boolean, default true
```



## License

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

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