Add new static prop for SSR rendering

README.md

@@ -37,6 +37,7 @@ function Carousel() {
  options={flickityOptions} // takes flickity options {}
  disableImagesLoaded={false} // default false
  reloadOnUpdate // default false
+ static // default false
  >
  <img src="/images/placeholder.png"/>
  <img src="/images/placeholder.png"/>
@@ -65,6 +66,8 @@ yarn start
 | `options` | `Object` | `{}` | Flickity initialization opions |
 | `disableImagesLoaded`| `Boolean` | `false` | Disable call `reloadCells` images are loaded |
 | `reloadOnUpdate` | `Boolean` | `false` | Run `reloadCells` and `resize` on `componentDidUpdate` |
+| `static` | `Boolean` | `false` | Carousel contents are static, and not updated at runtime. |
+ | Needed for smooth server-side rendering. |
 | `flickityRef` | `Function` | | like `ref` function, get Flickity instance in parent component|
 
 

__tests__/component.spec.js

@@ -71,3 +71,21 @@ it('Renders children', () => {
  const children = flickity.instance().props.children;
  expect(children.length).toEqual(3);
 });
+
+it('Renders a static carousel', () => {
+ const flickity = mount(
+ <Flickity
+ className={'carousel'}
+ disableImagesLoaded={false}
+ reloadOnUpdate
+ static
+ >
+ <img src="/images/placeholder.png"/>
+ <img src="/images/placeholder.png"/>
+ <img src="/images/placeholder.png"/>
+ </Flickity>
+ );
+
+ expect(flickity.find('.flickity-slider').length).toEqual(0);
+ expect(flickity.find('img').length).toEqual(3);
+})

src/index.d.ts

@@ -2,19 +2,20 @@ import React, { Component } from "react";
 
 interface Props {
  className?: string;
+ disableImagesLoaded?: boolean;
  elementType?: string;
+ flickityRef?: (ref: HTMLDivElement) => void;
  options?: FlickityOptions;
- disableImagesLoaded?: boolean;
  reloadOnUpdate?: boolean;
- flickityRef?: (ref: HTMLDivElement) => void;
+ static?: boolean;
 }
 
 declare class Flickity extends React.Component<Props, any> {}
 
 export default Flickity;
 
 /**
- * @todo - Get @types/flickity to export FlickityOptions type 
+ * @todo - Get @types/flickity to export FlickityOptions type
  */
 export interface FlickityOptions {
  /**
@@ -210,4 +211,4 @@ export interface FlickityOptions {
  * javascript dictionary of points or path to SVG file
  */
  arrowShape?: string | { x0: number, x1: number, y1: number, x2: number, y2: number, x3: number };
-}
+}

src/index.js

@@ -65,27 +65,29 @@ class FlickityComponent extends Component {
  this.carousel = c;
  },
  },
- this.renderPortal()
+ this.props.static ? this.props.children : this.renderPortal()
  );
  }
 }
 
 FlickityComponent.propTypes = {
- disableImagesLoaded: PropTypes.bool,
- reloadOnUpdate: PropTypes.bool,
- options: PropTypes.object,
+ children: PropTypes.array,
  className: PropTypes.string,
+ disableImagesLoaded: PropTypes.bool,
  elementType: PropTypes.string,
- children: PropTypes.array,
  flickityRef: PropTypes.func,
+ options: PropTypes.object,
+ reloadOnUpdate: PropTypes.bool,
+ static: PropTypes.bool,
 };
 
 FlickityComponent.defaultProps = {
- disableImagesLoaded: false,
- reloadOnUpdate: false,
- options: {},
  className: '',
+ disableImagesLoaded: false,
  elementType: 'div',
+ options: {},
+ reloadOnUpdate: false,
+ static: false,
 };
 
 export default FlickityComponent;