From 71bb8bd35de3eea3234f696d9c394e897094aeeb Mon Sep 17 00:00:00 2001
From: Tony Nguyen <tonynguyenit18@gmail.com>
Date: Fri, 12 Mar 2021 08:18:05 +0700
Subject: [PATCH] update readme to have good instruction

---
 .npmignore      |  8 +++++
 .prettierignore |  3 +-
 README.md       | 78 ++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 .npmignore

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..8e47099
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,8 @@
+src
+node_modules
+.vscode
+.eslintrc.js
+.prettierignore
+.prettierrc.yml
+rollup.config.js
+tsconfig.json
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index d163863..d009337 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,2 @@
-build/
\ No newline at end of file
+build/
+README.md
\ No newline at end of file
diff --git a/README.md b/README.md
index fcc9930..aee8e72 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,77 @@
-# react-pixelate
+# React Pixelate
+
+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
+* 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 Usage
+
+```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
+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