From 1f49e1422ae251e5c2c260e34d538f720a35f7b8 Mon Sep 17 00:00:00 2001
From: Jap Mul Eindbaas <jap@branchonline.nl>
Date: Tue, 13 Feb 2018 15:27:08 +0100
Subject: [PATCH] Updated the width prop to include more valid CSS values.

Fixes #165
---
 README.md               | 2 +-
 examples/src/index.html | 4 ++--
 src/Lightbox.js         | 9 ++++++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 20ee69b0..551cc2cc 100644
--- a/README.md
+++ b/README.md
@@ -106,7 +106,7 @@ preloadNextImage | bool | true | Based on the direction the user is navigating,
 rightArrowTitle | string | ' Next (Right arrow key) ' | Customize right arrow title
 showCloseButton | bool  | true | Optionally display a close "X" button in top right corner
 showImageCount | bool  | true | Optionally display image index, e.g., "3 of 20"
-width | number  | 1024 | Maximum width of the carousel; defaults to 1024px
+width | number\|string | 1024 | Maximum width of the carousel; defaults to 1024px. Accepts values as `px`, `vw`, `%`, `none`, `initial` or `inherit`. A plain number defaults to usage in `px`.
 spinner | func | DefaultSpinner | Spinner component class
 spinnerColor | string | 'white' | Color of spinner
 spinnerSize | number | 100 | Size of spinner
diff --git a/examples/src/index.html b/examples/src/index.html
index 3fe99a5d..f14c496d 100644
--- a/examples/src/index.html
+++ b/examples/src/index.html
@@ -197,9 +197,9 @@ <h2>Options</h2>
 										</tr>
 										<tr>
 											<td align="left">width</td>
-											<td align="left">number</td>
+											<td align="left">number|string</td>
 											<td align="left">1024</td>
-											<td align="left">Maximum width of the carousel; defaults to 1024px</td>
+											<td align="left">Maximum width of the carousel; defaults to 1024px. Accepts values as <code>px</code>, <code>vw</code>, <code>%</code>, <code>none</code>, <code>initial</code> or <code>inherit</code>. A plain number defaults to usage in <code>px</code>.</td>
 										</tr>
 									</tbody>
 								</table>
diff --git a/src/Lightbox.js b/src/Lightbox.js
index 6ff3eefb..26ddd53c 100644
--- a/src/Lightbox.js
+++ b/src/Lightbox.js
@@ -397,7 +397,14 @@ Lightbox.propTypes = {
 	spinnerSize: PropTypes.number,
 	theme: PropTypes.object,
 	thumbnailOffset: PropTypes.number,
-	width: PropTypes.number,
+	width: function (props, propName, componentName) {
+		if (!/^\d+(px|%|vw|$)|initial|inherit|none/.test(props[propName])) {
+			return new Error(
+                                'Invalid prop `' + propName + '` supplied to `' + componentName + '`. '
+                                + 'Valid values are `initial`, `inherit`, `none` or a number as `px`, `vw` or `%`.'
+			);
+		}
+	},
 };
 Lightbox.defaultProps = {
 	closeButtonTitle: 'Close (Esc)',