Fix bug: Canvas width is ignored (#5)

Fix bug #4
gibbok · Aug 4, 2020 · 93011ca · 93011ca
1 parent e0fe86d
commit 93011ca
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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={