refacetor element pixelated to have pixelsize only

README.md

@@ -1,4 +1,11 @@
-# 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.
 
@@ -71,7 +78,4 @@ fillTransparencyColor| String | white                 | For images with transpar
 Property             | Type   |Default Value|Description                               |Required
 ---------------------|--------|-------------|------------------------------------------|--------
 children             |  JSX.Element | element inside body of ElementPixelated component | Element want to be pixelated                       |No
-width                | Int    | Original offsetWidth of children| Prop to override the original width| No
-height               | Int    | Original offsetHeight of children| Prop to override the original height| No
 pixelSize            | Int    | 5                     | Size of the pixel in the new pixelated element| 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 

src/ElementPixelated/index.tsx

@@ -14,52 +14,32 @@ const colors = [
 ]
 
 export type ElementPixelatedProps = {
-  width?: number
-  height?: number
   pixelSize?: number
-  centered?: boolean
-  fillTransparencyColor?: string
 }
 
 export const ElementPixelated = ({
   children,
-  width,
-  height,
-  pixelSize = 5,
-  centered,
-  fillTransparencyColor
+  pixelSize = 5
 }: ElementPixelatedProps & { children: JSX.Element }) => {
   const childNodeRef = useRef<HTMLDivElement>()
   const canvasRef = useRef<HTMLCanvasElement>()
   useEffect(() => {
     const paintPixels = ({
       ctx,
       img,
-      pixelSize,
-      centered
+      pixelSize
     }: {
       ctx: CanvasRenderingContext2D
       img: HTMLImageElement
       pixelSize: number
-      centered: boolean
-      fillTransparencyColor: string
     }) => {
       if (!isNaN(pixelSize) && pixelSize > 0) {
         for (let x = 0; x < img.width + pixelSize; x += pixelSize) {
           for (let y = 0; y < img.height + pixelSize; y += pixelSize) {
             // Random color and paint it
             const colorIndex = Math.floor(Math.random() * 10)
             ctx.fillStyle = colors[colorIndex]
-            if (centered) {
-              ctx.fillRect(
-                Math.floor(x - (pixelSize - (img.width % pixelSize) / 2)),
-                Math.floor(y - (pixelSize - (img.height % pixelSize) / 2)),
-                pixelSize,
-                pixelSize
-              )
-            } else {
-              ctx.fillRect(x, y, pixelSize, pixelSize)
-            }
+            ctx.fillRect(x, y, pixelSize, pixelSize)
           }
         }
       }
@@ -72,19 +52,19 @@ export const ElementPixelated = ({
 
       const canvas = canvasRef.current
       const ctx = canvas.getContext("2d")
-      img.width = width ? width : img.width
-      img.height = height ? height : img.height
+      img.width = img.width
+      img.height = img.height
       canvas.width = img.width
       canvas.height = img.height
       // we paint the image into the canvas
       // this is needed to get RGBA info out of each pixel
       ctx.drawImage(img, 0, 0, img.width, img.height)
-      paintPixels({ ctx, img, pixelSize, centered, fillTransparencyColor })
+      paintPixels({ ctx, img, pixelSize })
       img = null
     }
 
     pixelate()
-  }, [width, pixelSize, centered, fillTransparencyColor])
+  }, [pixelSize])
 
   return (
     <div style={{ position: "relative" }} ref={childNodeRef}>

src/ImagePixelated/index.tsx

@@ -27,7 +27,7 @@ export const ImagePixelated = ({
       centered,
       fillTransparencyColor
     })
-  }, [src, width, pixelSize, centered, fillTransparencyColor])
+  }, [src, width, height, pixelSize, centered, fillTransparencyColor])
   const pixelate = ({
     src,
     width,