### Install React Pixelate using npm

Source: https://github.com/tonynguyenit18/react-pixelate/blob/master/README.md

This command installs the `react-pixelate` library using the npm package manager, adding it to your project's dependencies.

```bash
npm install react-pixelate
```

--------------------------------

### Install React Pixelate using yarn

Source: https://github.com/tonynguyenit18/react-pixelate/blob/master/README.md

This command installs the `react-pixelate` library using the yarn package manager, adding it to your project's dependencies.

```bash
yarn add react-pixelate
```

--------------------------------

### Basic usage of ElementPixelated component

Source: https://github.com/tonynguyenit18/react-pixelate/blob/master/README.md

This JSX example demonstrates how to use the `ElementPixelated` component to pixelate any child HTML element. It wraps the content to be pixelated and accepts `pixelSize` as a prop.

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

--------------------------------

### Basic usage of ImagePixelated component

Source: https://github.com/tonynguyenit18/react-pixelate/blob/master/README.md

This JSX example shows how to use the `ImagePixelated` component to pixelate an image. It takes `src`, `width`, `height`, and `fillTransparencyColor` as props to control the pixelation and appearance.

```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>
```

--------------------------------

### Import React Pixelate components

Source: https://github.com/tonynguyenit18/react-pixelate/blob/master/README.md

This JSX snippet demonstrates how to import the `ImagePixelated` and `ElementPixelated` components from the `react-pixelate` library, making them available for use in your React application.

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

--------------------------------

### ImagePixelated component properties

Source: https://github.com/tonynguyenit18/react-pixelate/blob/master/README.md

Documentation for the properties available on the `ImagePixelated` React component. These properties control the source image, dimensions, pixelation size, centering, and transparency handling.

```APIDOC
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
```

--------------------------------

### ElementPixelated component properties

Source: https://github.com/tonynguyenit18/react-pixelate/blob/master/README.md

Documentation for the properties available on the `ElementPixelated` React component. These properties control the content to be pixelated and the size of the pixels.

```APIDOC
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
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.