Skip to content

Commit df12bcc

Browse files
committed
Add static prop for SSR
1 parent 8fa6d23 commit df12bcc

File tree

6 files changed

+48
-22
lines changed

6 files changed

+48
-22
lines changed

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ function Carousel() {
3737
options={flickityOptions} // takes flickity options {}
3838
disableImagesLoaded={false} // default false
3939
reloadOnUpdate // default false
40+
static // default false
4041
>
4142
<img src="/images/placeholder.png"/>
4243
<img src="/images/placeholder.png"/>
@@ -65,6 +66,8 @@ yarn start
6566
| `options` | `Object` | `{}` | Flickity initialization opions |
6667
| `disableImagesLoaded`| `Boolean` | `false` | Disable call `reloadCells` images are loaded |
6768
| `reloadOnUpdate` | `Boolean` | `false` | Run `reloadCells` and `resize` on `componentDidUpdate` |
69+
| `static` | `Boolean` | `false` | Carousel contents are static, and not updated at runtime. |
70+
| Needed for smooth server-side rendering. |
6871
| `flickityRef` | `Function` | | like `ref` function, get Flickity instance in parent component|
6972

7073

__tests__/component.spec.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,21 @@ it('Renders children', () => {
7171
const children = flickity.instance().props.children;
7272
expect(children.length).toEqual(3);
7373
});
74+
75+
it('Renders a static carousel', () => {
76+
const flickity = mount(
77+
<Flickity
78+
className={'carousel'}
79+
disableImagesLoaded={false}
80+
reloadOnUpdate
81+
static
82+
>
83+
<img src="/images/placeholder.png"/>
84+
<img src="/images/placeholder.png"/>
85+
<img src="/images/placeholder.png"/>
86+
</Flickity>
87+
);
88+
89+
expect(flickity.find('.flickity-slider').length).toEqual(0);
90+
expect(flickity.find('img').length).toEqual(3);
91+
})

lib/index.js

Lines changed: 11 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

lib/index.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/index.d.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@ import React, { Component } from "react";
22

33
interface Props {
44
className?: string;
5+
disableImagesLoaded?: boolean;
56
elementType?: string;
7+
flickityRef?: (ref: HTMLDivElement) => void;
68
options?: FlickityOptions;
7-
disableImagesLoaded?: boolean;
89
reloadOnUpdate?: boolean;
9-
flickityRef?: (ref: HTMLDivElement) => void;
10+
static?: boolean;
1011
}
1112

1213
declare class Flickity extends React.Component<Props, any> {}
1314

1415
export default Flickity;
1516

1617
/**
17-
* @todo - Get @types/flickity to export FlickityOptions type
18+
* @todo - Get @types/flickity to export FlickityOptions type
1819
*/
1920
export interface FlickityOptions {
2021
/**
@@ -210,4 +211,4 @@ export interface FlickityOptions {
210211
* javascript dictionary of points or path to SVG file
211212
*/
212213
arrowShape?: string | { x0: number, x1: number, y1: number, x2: number, y2: number, x3: number };
213-
}
214+
}

src/index.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,27 +65,29 @@ class FlickityComponent extends Component {
6565
this.carousel = c;
6666
},
6767
},
68-
this.renderPortal()
68+
this.props.static ? this.props.children : this.renderPortal()
6969
);
7070
}
7171
}
7272

7373
FlickityComponent.propTypes = {
74-
disableImagesLoaded: PropTypes.bool,
75-
reloadOnUpdate: PropTypes.bool,
76-
options: PropTypes.object,
74+
children: PropTypes.array,
7775
className: PropTypes.string,
76+
disableImagesLoaded: PropTypes.bool,
7877
elementType: PropTypes.string,
79-
children: PropTypes.array,
8078
flickityRef: PropTypes.func,
79+
options: PropTypes.object,
80+
reloadOnUpdate: PropTypes.bool,
81+
static: PropTypes.bool,
8182
};
8283

8384
FlickityComponent.defaultProps = {
84-
disableImagesLoaded: false,
85-
reloadOnUpdate: false,
86-
options: {},
8785
className: '',
86+
disableImagesLoaded: false,
8887
elementType: 'div',
88+
options: {},
89+
reloadOnUpdate: false,
90+
static: false,
8991
};
9092

9193
export default FlickityComponent;

0 commit comments

Comments
 (0)