add thumbWidth prop to allow specifying thumbnail width

add documentation for new thumbWidth prop
leandrowd · Sep 22, 2017 · f365fd5 · f365fd5
1 parent 06b3c5d
commit f365fd5
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -80,6 +80,7 @@ ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
 | showStatus            | `boolean`     | `true` | show index of the current item. i.e: (1/8) |
 | showIndicators        | `boolean`     | `true` | show little dots at the bottom with links for changing the item |
 | showThumbs            | `boolean`     | `true` | show thumbnails of the images |
+| thumbWidth            | `number`      | `undefined` | optionally specify pixel width (as an integer) of a thumbnail (including any padding) to avoid calculating values (helps with server-side renders or page cache issues) |
 | infiniteLoop          | `boolean`     | `false` | infinite loop sliding  |
 | selectedItem          | `number`      | `0` | selects an item though props / defines the initial selected item |
 | axis                  | `string`      | `horizontal` | changes orientation - accepts `horizontal` and `vertical` |

diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -22,6 +22,7 @@ class Carousel extends Component {
         showIndicators: PropTypes.bool,
         infiniteLoop: PropTypes.bool,
         showThumbs: PropTypes.bool,
+        thumbWidth: PropTypes.number,
         selectedItem: PropTypes.number,
         onClickItem: PropTypes.func.isRequired,
         onClickThumb: PropTypes.func.isRequired,
@@ -464,7 +465,7 @@ class Carousel extends Component {
         }
 
         return (
-            <Thumbs onSelectItem={this.handleClickThumb} selectedItem={this.state.selectedItem} transitionTime={this.props.transitionTime}>
+            <Thumbs onSelectItem={this.handleClickThumb} selectedItem={this.state.selectedItem} transitionTime={this.props.transitionTime} thumbWidth={this.props.thumbWidth}>
                 {this.props.children}
             </Thumbs>
         );

diff --git a/src/components/Thumbs.js b/src/components/Thumbs.js
@@ -12,7 +12,8 @@ class Thumbs extends Component {
     static propsTypes = {
         children: PropTypes.element.isRequired,
         transitionTime: PropTypes.number,
-        selectedItem: PropTypes.number
+        selectedItem: PropTypes.number,
+        thumbWidth: PropTypes.number
     };
 
     static defaultProps = {
@@ -96,7 +97,7 @@ class Thumbs extends Component {
 
         const total = this.props.children.length;
         this.wrapperSize = this.itemsWrapper.clientWidth;
-        this.itemSize = outerWidth(this.refs.thumb0);
+        this.itemSize = this.props.thumbWidth ? this.props.thumbWidth : outerWidth(this.refs.thumb0);
         this.visibleItems = Math.floor(this.wrapperSize / this.itemSize);
         this.lastPosition = total - this.visibleItems;
         this.showArrows = this.visibleItems < total;