# grainy

> add grain to background without jquery

Latest version **1.0.7** (published 2017-04-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install grainy
pnpm add grainy
yarn add grainy
bun add grainy
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2017-04-17 |
| First published | 2017-04-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | garethrobertlee@gmail.com |
| Maintainers | garethrobertlee |

## Links

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

## Recent versions

- 1.0.7 (latest) — 2017-04-17
- 1.0.6 — 2017-04-17
- 1.0.5 — 2017-04-17
- 1.0.4 — 2017-04-16
- 1.0.3 — 2017-04-16
- 1.0.2 — 2017-04-16
- 1.0.1 — 2017-04-16
- 1.0.0 — 2017-04-16

## README

Grainy
===========

A simple javascript utility for adding grain to backgrounds or other elements.

Install with npm.

Demo: http://grainy.malham.io

```sh
npm install grainy
```

Use with node.js, webpack and e.g react.js

```js
const grainy = require('grainy');

componentDidMount(){

  const node = ReactDOM.findDOMNode(this);
  node.grainy({
    intensity: 1,
    size: 525,
    color: '#000000',
    backgroundColor: '#85b6d3',
    opacity: 0.12,
    monochrome: true,
  });
}
```

Alternatively, you can include `index.js` in your page and reference the global method.

```js
document.querySelector('.box5').grainy({
  intensity: 1,
  size: 625,
  color: '#ffffff',
  backgroundColor: '#2f5d8b',
  opacity: 0.24,
  monochrome: true
})
```


Originally based on, and modified from, Daniel Rapp's jQuery plugin 'Noisy'

https://github.com/DanielRapp/Noisy



## License

[ISC](LICENSE). Copyright (c) 2017 Gareth Robert Lee.

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