From 93011ca7aa1c321f5244b6ea6d15d465488dc26a Mon Sep 17 00:00:00 2001
From: GibboK <17195702+gibbok@users.noreply.github.com>
Date: Tue, 4 Aug 2020 22:04:06 +0200
Subject: [PATCH] Fix bug: Canvas width is ignored (#5)

Fix bug https://github.com/gibbok/react-color-picker-palette/issues/4
---
 README.md                                              | 2 +-
 package.json                                           | 2 +-
 src/ColorPickerPalette.tsx                             | 2 ++
 src/__snapshots__/ColorPickerPalette.stories.storyshot | 6 ++++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 8b97a1c..0a69209 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ Live demo here: <https://gibbok.github.io/react-color-picker-palette/>
 
 ### Installation
 
-In your terminal navigate to you `package.json` file and run:
+This package is [available on npm](https://www.npmjs.com/package/react-color-picker-palette), to install it, use your terminal and navigate to you `package.json` file and run:
 
 `npm i react-color-picker-palette`
 
diff --git a/package.json b/package.json
index fc10690..77ae525 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-color-picker-palette",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "ColorPickerPalette is a React reusable color picker palette written in TypeScript.",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
diff --git a/src/ColorPickerPalette.tsx b/src/ColorPickerPalette.tsx
index fb32345..c3cd540 100644
--- a/src/ColorPickerPalette.tsx
+++ b/src/ColorPickerPalette.tsx
@@ -92,6 +92,8 @@ export const ColorPickerPalette = ({
       <canvas
         data-cy="canvas"
         style={{ ...styles.canvas }}
+        width={styles.canvas.width}
+        height={styles.canvas.height}
         ref={canvasRef}
         onClick={(e) => {
           selectColor(e);
diff --git a/src/__snapshots__/ColorPickerPalette.stories.storyshot b/src/__snapshots__/ColorPickerPalette.stories.storyshot
index d30c122..e0d4290 100644
--- a/src/__snapshots__/ColorPickerPalette.stories.storyshot
+++ b/src/__snapshots__/ColorPickerPalette.stories.storyshot
@@ -72,6 +72,7 @@ exports[`Storyshots ColorPickerPalette custom 1`] = `
   >
     <canvas
       data-cy="canvas"
+      height={250}
       onClick={[Function]}
       style={
         Object {
@@ -81,6 +82,7 @@ exports[`Storyshots ColorPickerPalette custom 1`] = `
           "width": 400,
         }
       }
+      width={400}
     />
     <div
       style={
@@ -184,6 +186,7 @@ exports[`Storyshots ColorPickerPalette dark 1`] = `
   >
     <canvas
       data-cy="canvas"
+      height={150}
       onClick={[Function]}
       style={
         Object {
@@ -195,6 +198,7 @@ exports[`Storyshots ColorPickerPalette dark 1`] = `
           "width": 300,
         }
       }
+      width={300}
     />
     <div
       style={
@@ -296,6 +300,7 @@ exports[`Storyshots ColorPickerPalette light 1`] = `
   >
     <canvas
       data-cy="canvas"
+      height={150}
       onClick={[Function]}
       style={
         Object {
@@ -306,6 +311,7 @@ exports[`Storyshots ColorPickerPalette light 1`] = `
           "width": 300,
         }
       }
+      width={300}
     />
     <div
       style={