# react-paxelate

> React library to pixelate images or elements

Latest version **0.0.4** (published 2023-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-paxelate
pnpm add react-paxelate
yarn add react-paxelate
bun add react-paxelate
```

## Health

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

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

Warnings: low downloads; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-04-19 |
| First published | 2023-04-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Tony Nguyen tonynguyenit18@gmail.com |
| Maintainers | badgeth |
| Keywords | react, react-component, pixel, pixelate, react-pixelate, blur element |

## Links

- npm: https://www.npmjs.com/package/react-paxelate
- Repository: https://github.com/tonynguyenit18/react-pixelate
- Homepage: https://github.com/tonynguyenit18/react-pixelate#readme
- Issues: https://github.com/tonynguyenit18/react-pixelate/issues
- npm.io page: https://npm.io/package/react-paxelate

## 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.4 (latest) — 2023-04-19
- 0.0.3 — 2023-04-19
- 0.0.2 — 2023-04-11
- 0.0.1 — 2023-04-11

## README

[![npm version](https://badge.fury.io/js/react-pixelate.svg)](https://badge.fury.io/js/react-pixelate)

<p align="center">
  <a href="https://github.com/tonynguyenit18/react-pixelate#readme">
    <img width="200" src="./logo.png">
  </a>
</p>

<h1 align="center">React Pixelate</h1>

This repo is to pixelate **Images** and **HTML Element** for React.

> This repo is inspired by [react-pixelify](https://github.com/nikoferro/react-pixelify). ImagePixelated is a typescript version of Pixelify.

## Components

- ImagePixelated
- ElementPixelated

## Installation

Using npm:
```bash
npm install react-pixelate
```

OR using yarn:
```bash
yarn add react-pixelate
```

## Demo
* Demo page: [React Pixelate Demo](https://tonynguyenit18.github.io/react-pixelate-demo/)
* Play with codesandbox: 
[![Edit react-pixelate-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-pixelate-example-w80ew?fontsize=14&hidenavigation=1&theme=dark)
## Usage

Import components

```jsx
import { ImagePixelated, ElementPixelated } from "react-pixelate"
```

**1. ImagePixelated**

```jsx
// Import image you want to pixelate
// import src from "./img.png"

<div className="App">
  <ImagePixelated src={src} width={500} height={300} fillTransparencyColor={"grey"} />
</div>
```
###### Properties

Property             | Type   |Default Value|Description                               |Required
---------------------|--------|-------------|------------------------------------------|--------
src                  | String |             | Source of the image                       |Yes
width                | Int    | Image original width| Prop to override the original width| No
height               | Int    | Image original height| Prop to override the original height| No
pixelSize            | Int    | 5                     | Size of the pixel in the new pixelated image| No 
centered             | Bool   | false                 | If true, the pixels grid will be centered vertically and horizontally. Example: You choose a pixelSize of 10, but your image width or height cant be divided by an exact grid of 10x10 pixels. Setting this prop as **true** will set an offset that keeps the grid centered | No
fillTransparencyColor| String | white                 | For images with transparency (e.g png image), you can set a value for the places where the image is transparent| No  


**2. ElementPixelated**

```jsx
<div className="App">
  <ElementPixelated pixelSize={5}>
    <div style={{ height: 200, width: 1000 }}>
      Text here, or any child element (including image)
    </div>
  </ElementPixelated>
</div>
```

###### Properties

Property             | Type   |Default Value|Description                               |Required
---------------------|--------|-------------|------------------------------------------|--------
children             |  JSX.Element | element inside body of ElementPixelated component | Element want to be pixelated                       |No
pixelSize            | Int    | 5                     | Size of the pixel in the new pixelated element| No

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