# grayscale-polyfill
> A tiny grayscale polyfill for IE 10 and 11.
Latest version **0.0.1** (published 2020-08-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install grayscale-polyfill
pnpm add grayscale-polyfill
yarn add grayscale-polyfill
bun add grayscale-polyfill
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-08-14 |
| First published | 2020-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | djthomps |
| Keywords | svg, grayscale, greyscale, ie, polyfill, browser, react, react-polyfill |
## Links
- npm: https://www.npmjs.com/package/grayscale-polyfill
- npm.io page: https://npm.io/package/grayscale-polyfill
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.0.1 (latest) — 2020-08-14
## README
# Grayscale Polyfill
A tiny IE polyfill to make images grayscale.
## Motivation
[IE 10 and above dropped support for legacy DX filters](https://docs.microsoft.com/en-us/archive/blogs/ie/legacy-dx-filters-removed-from-ie10-release-preview) which cases major issues with applications that need to support legacy browsers. Currently solutions are written in jQuery or use the Canvas API which has issues with cross-browser compatibility. For those needing to support IE 10/11 and are not using something like d3 (or some other SVG manipulation library) this is for you.
## Usage
This package exports a single function `Grayscale` and expected to receive a single `HTMLImageElement`.
### Webpack/Rollup
```js
import { gray } from 'grayscale-polyfill';
gray(document.querySelector('img'));
```
### Browser
```html
Grayscale Demo
```
## API
### Options API
| Option | Type | Required | Description |
| ------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------ |
| `polyfillCheck` | `() => boolean` | No | Override the default polyfill check function. |
| `svgId` | `string` | No | Specify a custom SVG ID. This is the ID of the grayscale mask root `svg` element. |
| `mode` | `'replace' | 'manual'` | No | Do not perform replacement. Return the instance of the `SVGElement` that has been created. |
| `grayscaleFilterId` | `string` | No | Specify a custom grayscale filter ID referenced by the SVG `Image` element |
### Exported Functions
Aside from options API, there are three (named) functions exported by this package:
| Function | Parameters | Return Value | Description |
| ---------------- | -------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `gray` | `image: HTMLImageElement` `options?: GrayscaleOptions` | `HTMLImageElement | SVGElement` | The main export from this package. This function creates the grayscale mask using the default grayscale filter ID and takes care of replacing `image` with the generated SVG `Image` element. |
| `createSvgImage` | `url: string` `width: number` `height: number` | `SVGElement` | Creates the SVG `Image` element that is used to replace the original image |
| `createSvgMask` | `id?: string` `filterId?: string` `root?: HTMLElement` | `SVGElement` | Returns the SVG element that contains the grayscale matrix |
## Usage with React
```jsx
import * as React from 'react';
import { gray } from 'grayscale-polyfill';
const opts = { mode: 'manual' };
function App() {
const [image, setImage] = React.useState(null);
const ref = React.useRef(null);
React.useEffect(() => {
if (ref.current) {
setImage({ __html: gray(ref.current, opts).innerHTML });
}
}, []);
return image ? : ;
}
```
Alternatively you can use something like [`react-html-parser`](https://www.npmjs.com/package/react-html-parser) to safely convert the resulting SVG code to a rea
ct component.
## Usage in Other Browsers
For really old versions of IE _and_ modern clients you can use regular CSS:
```css
.grayscale {
filter: gray; /* IE 6 - 9 */
filter: grayscale(1); /* evergreen browsers*/
}
```
If you have certain browsers that are especially fickle you can save a new file `gray.svg`:
```xml
```
then you can reference in CSS:
```css
.grayscale {
filter: url('../../gray.svg#grayscale');
}
```
---
_Source: https://npm.io/package/grayscale-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
```
## API
### Options API
| Option | Type | Required | Description |
| ------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------ |
| `polyfillCheck` | `() => boolean` | No | Override the default polyfill check function. |
| `svgId` | `string` | No | Specify a custom SVG ID. This is the ID of the grayscale mask root `svg` element. |
| `mode` | `'replace' | 'manual'` | No | Do not perform replacement. Return the instance of the `SVGElement` that has been created. |
| `grayscaleFilterId` | `string` | No | Specify a custom grayscale filter ID referenced by the SVG `Image` element |
### Exported Functions
Aside from options API, there are three (named) functions exported by this package:
| Function | Parameters | Return Value | Description |
| ---------------- | -------------------------------------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `gray` | `image: HTMLImageElement` 
;
}
```
Alternatively you can use something like [`react-html-parser`](https://www.npmjs.com/package/react-html-parser) to safely convert the resulting SVG code to a rea
ct component.
## Usage in Other Browsers
For really old versions of IE _and_ modern clients you can use regular CSS:
```css
.grayscale {
filter: gray; /* IE 6 - 9 */
filter: grayscale(1); /* evergreen browsers*/
}
```
If you have certain browsers that are especially fickle you can save a new file `gray.svg`:
```xml
```
then you can reference in CSS:
```css
.grayscale {
filter: url('../../gray.svg#grayscale');
}
```
---
_Source: https://npm.io/package/grayscale-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._