@egjs/react-flicking 3.8.0 → 3.8.3

package/declaration/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods, VisibleChangeEvent } from "@egjs/flicking";
+import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods, VisibleChangeEvent, ContentErrorEvent, ContentLoadEvent } from "@egjs/flicking";
 import NativeFlicking from "@egjs/flicking";
 export declare type ParametersType<T, R> = T extends (...params: infer U) => any ? (...params: U) => R : never;
 export declare type FlickingType<T> = {
@@ -16,10 +16,12 @@ export interface FlickingProps {
     onMoveStart: (e: FlickingEvent) => any;
     onMove: (e: FlickingEvent) => any;
     onMoveEnd: (e: FlickingEvent) => any;
+    onChange: (e: ChangeEvent) => any;
     onRestore: (e: FlickingEvent) => any;
     onSelect: (e: SelectEvent) => any;
-    onChange: (e: ChangeEvent) => any;
     onNeedPanel: (e: NeedPanelEvent) => any;
     onVisibleChange: (e: VisibleChangeEvent) => any;
+    onContentLoad: (e: ContentLoadEvent) => any;
+    onContentError: (e: ContentErrorEvent) => any;
     [key: string]: any;
 }

package/dist/flicking.cjs.js

@@ -4,7 +4,7 @@ name: @egjs/react-flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.8.0
+version: 3.8.3
 */
 'use strict';
 
@@ -35,13 +35,14 @@ var extendStatics = function (d, b) {
   } instanceof Array && function (d, b) {
     d.__proto__ = b;
   } || function (d, b) {
-    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
   };
 
   return extendStatics(d, b);
 };
 
 function __extends(d, b) {
+  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
   extendStatics(d, b);
 
   function __() {
@@ -70,6 +71,8 @@ function __decorate(decorators, target, key, desc) {
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
+/** @deprecated */
+
 function __spreadArrays() {
   for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
 
@@ -111,6 +114,8 @@ var FLICKING_PROPS = {
   onRestore: function (e) {},
   onSelect: function (e) {},
   onChange: function (e) {},
+  onContentLoad: function (e) {},
+  onContentError: function (e) {},
   onVisibleChange: function (e) {}
 };
 
@@ -224,6 +229,14 @@ function (_super) {
         _this.props.onVisibleChange(e);
 
         _this.forceUpdate();
+      },
+      contentLoad: function (e) {
+        _this.props.onContentLoad(e);
+
+        _this.forceUpdate();
+      },
+      contentError: function (e) {
+        return _this.props.onContentError(e);
       }
     });
     var children = this.getChildren();

package/dist/flicking.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"flicking.cjs.js","sources":["../src/react-flicking/Clone.tsx","../src/react-flicking/consts.ts","../src/react-flicking/Flicking.tsx"],"sourcesContent":["import { Component } from \"react\";\n\nexport class CloneComponent extends Component {\n  public render() {\n    return this.props.children;\n  }\n}\n","import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent } from \"@egjs/flicking\";\nimport { FlickingProps } from \"./types\";\n\nexport const FLICKING_PROPS: FlickingProps = {\n  tag: \"div\",\n  viewportTag: \"div\",\n  cameraTag: \"div\",\n  classPrefix: \"eg-flick\",\n  plugins: [],\n  onNeedPanel: (e: NeedPanelEvent) => {},\n  onMoveStart: (e: FlickingEvent) => {},\n  onMove: (e: FlickingEvent) => {},\n  onMoveEnd: (e: FlickingEvent) => {},\n  onHoldStart: (e: FlickingEvent) => {},\n  onHoldEnd: (e: FlickingEvent) => {},\n  onRestore: (e: FlickingEvent) => {},\n  onSelect: (e: SelectEvent) => {},\n  onChange: (e: ChangeEvent) => {},\n  onVisibleChange: (e: VisibleChangeEvent) => {},\n};\n","import NativeFlicking, { FlickingOptions, Plugin, FlickingEvent, NeedPanelEvent, withFlickingMethods, DEFAULT_OPTIONS, VisibleChangeEvent, SelectEvent, ChangeEvent } from \"@egjs/flicking\";\nimport * as React from \"react\";\nimport { CloneComponent } from \"./Clone\";\nimport { FLICKING_PROPS } from \"./consts\";\nimport { FlickingProps, FlickingType } from \"./types\";\nimport ListDiffer, { ListFormat } from \"@egjs/list-differ\";\nimport ChildrenDiffer from \"@egjs/children-differ\";\n\nclass Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {\n  public static defaultProps: FlickingProps = FLICKING_PROPS;\n  public state: {\n    cloneCount: number,\n  } = {\n      cloneCount: 0,\n    };\n  // Flicking\n  @withFlickingMethods\n  private flicking?: NativeFlicking | null;\n  private options: FlickingOptions = {\n    ...DEFAULT_OPTIONS,\n    renderExternal: true,\n  };\n  // differ\n  private pluginsDiffer: ListDiffer<Plugin> = new ListDiffer<Plugin>();\n  private childrenDiffer: ChildrenDiffer<HTMLElement>;\n  private jsxDiffer: ListDiffer<string>;\n  private containerElement: HTMLElement;\n  private cameraElement: HTMLElement;\n\n  // life cycle\n  constructor(props: Partial<FlickingProps & FlickingOptions>) {\n    super(props);\n    const options = this.options;\n    for (const name in props) {\n      if (name in DEFAULT_OPTIONS) {\n        options[name] = props[name];\n      }\n    }\n  }\n\n  public render() {\n    const props = this.props;\n    /* tslint:disable:naming-convention */\n    const Tag = props.tag as any;\n    const Viewport = props.viewportTag as any;\n    const Camera = props.cameraTag as any;\n    /* tslint:enable:naming-convention */\n    const classPrefix = props.classPrefix;\n    const attributes: { [key: string]: any } = {};\n\n    for (const name in props) {\n      if (!(name in FLICKING_PROPS) && !(name in DEFAULT_OPTIONS)) {\n        attributes[name] = props[name];\n      }\n    }\n    return (\n      <Tag {...attributes} ref={e => {\n        e && (this.containerElement = e);\n      }}>\n        <Viewport className={`${classPrefix}-viewport`}>\n          <Camera className={`${classPrefix}-camera`} ref={e => {\n            e && (this.cameraElement = e);\n          }}>\n            {this.renderPanels()}\n          </Camera>\n        </Viewport>\n      </Tag>\n    );\n  }\n\n  public componentDidUpdate() {\n    const result = this.childrenDiffer!.update(this.getElements());\n    this.flicking!.sync(result);\n    this.checkPlugins();\n    this.checkCloneCount();\n  }\n\n  public componentDidMount() {\n    this.childrenDiffer = new ChildrenDiffer<HTMLElement>(this.getElements());\n    this.flicking = new NativeFlicking(\n      this.containerElement,\n      {\n        ...this.options,\n        framework: \"react\",\n        frameworkVersion: React.version,\n      } as object,\n    ).on({\n      moveStart: (e: FlickingEvent) => this.props.onMoveStart!(e),\n      move: (e: FlickingEvent) => this.props.onMove!(e),\n      moveEnd: (e: FlickingEvent) => this.props.onMoveEnd!(e),\n      holdStart: (e: FlickingEvent) => this.props.onHoldStart!(e),\n      holdEnd: (e: FlickingEvent) => this.props.onHoldEnd!(e),\n      select: (e: SelectEvent) => this.props.onSelect!(e),\n      needPanel: (e: NeedPanelEvent) => this.props.onNeedPanel!(e),\n      change: (e: ChangeEvent) => this.props.onChange!(e),\n      restore: (e: FlickingEvent) => this.props.onRestore!(e),\n      visibleChange: (e: VisibleChangeEvent) => {\n        this.props.onVisibleChange!(e);\n        this.forceUpdate();\n      },\n    });\n    const children = this.getChildren();\n    this.jsxDiffer = new ListDiffer<string>(children.map(child => `${child.key}`));\n\n    if (this.props.status) {\n      this.setStatus(this.props.status);\n    }\n    this.checkPlugins();\n    this.checkCloneCount();\n\n    if (this.props.renderOnlyVisible) {\n      this.forceUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    this.destroy({ preserveUI: true });\n  }\n\n  // private\n  private checkPlugins() {\n    const { list, added, removed, prevList } = this.pluginsDiffer.update(this.props.plugins!);\n\n    this.flicking!.addPlugins(added.map(index => list[index]));\n    this.flicking!.removePlugins(removed.map(index => prevList[index]));\n  }\n\n  private checkCloneCount() {\n    const cloneCount = this.flicking!.getCloneCount();\n\n    if (this.state.cloneCount !== cloneCount) {\n      this.setState({\n        cloneCount,\n      });\n    }\n  }\n\n  private renderPanels() {\n    const { renderOnlyVisible } = this.props;\n    const flicking = this.flicking;\n    const reactChildren = this.getChildren();\n    let panels: Array<React.ReactElement<any>>;\n\n    if (flicking && renderOnlyVisible) {\n      const diffResult = this.jsxDiffer.update(reactChildren.map(child => `${child.key}`));\n      const panelCnt = reactChildren.length;\n\n      flicking.beforeSync(diffResult);\n\n      const indexesToRender = flicking.getRenderingIndexes(diffResult);\n      panels = indexesToRender.map(index => {\n        if (index >= panelCnt) {\n          const relativeIndex = index % panelCnt;\n          const cloneIndex = Math.floor(index / panelCnt) - 1;\n          const origEl = reactChildren[relativeIndex];\n\n          return <CloneComponent key={`clone${cloneIndex}${origEl.key}`}>{origEl}</CloneComponent>;\n        } else {\n          return reactChildren[index];\n        }\n      });\n    } else {\n      const cloneCount = this.state.cloneCount;\n      panels = [...reactChildren];\n\n      for (let i = 0; i < cloneCount; ++i) {\n        panels = panels.concat(reactChildren.map(el => {\n          return <CloneComponent key={`clone${i}${el.key}`}>{el}</CloneComponent>;\n        }));\n      }\n    }\n\n    return panels;\n  }\n\n  private getChildren() {\n    const children = React.Children.toArray(this.props.children).slice() as Array<React.ReactElement<any>>;\n    return typeof this.props.lastIndex === \"number\"\n      ? children.slice(0, this.props.lastIndex + 1)\n      : children;\n  }\n\n  private getElements(): ListFormat<HTMLElement> {\n    return this.cameraElement.children as any;\n  }\n}\ninterface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, FlickingType<Flicking> { }\nexport default Flicking;\n"],"names":["__extends","props","children","Component","FLICKING_PROPS","tag","viewportTag","cameraTag","classPrefix","plugins","onNeedPanel","e","onMoveStart","onMove","onMoveEnd","onHoldStart","onHoldEnd","onRestore","onSelect","onChange","onVisibleChange","_super","_this","cloneCount","DEFAULT_OPTIONS","renderExternal","ListDiffer","options","name","Tag","Viewport","Camera","attributes","React","ref","containerElement","className","cameraElement","renderPanels","result","childrenDiffer","update","getElements","flicking","sync","checkPlugins","checkCloneCount","ChildrenDiffer","NativeFlicking","__assign","framework","frameworkVersion","on","moveStart","move","moveEnd","holdStart","holdEnd","select","needPanel","change","restore","visibleChange","forceUpdate","getChildren","jsxDiffer","map","child","key","status","setStatus","renderOnlyVisible","destroy","preserveUI","_a","pluginsDiffer","list","added","removed","prevList","addPlugins","index","removePlugins","getCloneCount","state","setState","reactChildren","panels","diffResult","panelCnt_1","length","beforeSync","indexesToRender","getRenderingIndexes","relativeIndex","cloneIndex","Math","floor","origEl","CloneComponent","i","concat","el","toArray","slice","lastIndex","Flicking","__decorate","withFlickingMethods"],"mappings":"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"}
+{"version":3,"file":"flicking.cjs.js","sources":["../src/react-flicking/Clone.tsx","../src/react-flicking/consts.ts","../src/react-flicking/Flicking.tsx"],"sourcesContent":["import { Component } from \"react\";\n\nexport class CloneComponent extends Component {\n  public render() {\n    return this.props.children;\n  }\n}\n","import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent, ContentLoadEvent, ContentErrorEvent } from \"@egjs/flicking\";\nimport { FlickingProps } from \"./types\";\n\nexport const FLICKING_PROPS: FlickingProps = {\n  tag: \"div\",\n  viewportTag: \"div\",\n  cameraTag: \"div\",\n  classPrefix: \"eg-flick\",\n  plugins: [],\n  onNeedPanel: (e: NeedPanelEvent) => {},\n  onMoveStart: (e: FlickingEvent) => {},\n  onMove: (e: FlickingEvent) => {},\n  onMoveEnd: (e: FlickingEvent) => {},\n  onHoldStart: (e: FlickingEvent) => {},\n  onHoldEnd: (e: FlickingEvent) => {},\n  onRestore: (e: FlickingEvent) => {},\n  onSelect: (e: SelectEvent) => {},\n  onChange: (e: ChangeEvent) => {},\n  onContentLoad: (e: ContentLoadEvent) => {},\n  onContentError: (e: ContentErrorEvent) => {},\n  onVisibleChange: (e: VisibleChangeEvent) => {},\n};\n","import NativeFlicking, {\n  FlickingOptions,\n  Plugin,\n  FlickingEvent,\n  NeedPanelEvent,\n  withFlickingMethods,\n  DEFAULT_OPTIONS,\n  VisibleChangeEvent,\n  SelectEvent,\n  ChangeEvent,\n  ContentLoadEvent,\n  ContentErrorEvent\n} from \"@egjs/flicking\";\nimport * as React from \"react\";\nimport { CloneComponent } from \"./Clone\";\nimport { FLICKING_PROPS } from \"./consts\";\nimport { FlickingProps, FlickingType } from \"./types\";\nimport ListDiffer, { ListFormat } from \"@egjs/list-differ\";\nimport ChildrenDiffer from \"@egjs/children-differ\";\n\nclass Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {\n  public static defaultProps: FlickingProps = FLICKING_PROPS;\n  public state: {\n    cloneCount: number,\n  } = {\n      cloneCount: 0,\n    };\n  // Flicking\n  @withFlickingMethods\n  private flicking?: NativeFlicking | null;\n  private options: FlickingOptions = {\n    ...DEFAULT_OPTIONS,\n    renderExternal: true,\n  };\n  // differ\n  private pluginsDiffer: ListDiffer<Plugin> = new ListDiffer<Plugin>();\n  private childrenDiffer: ChildrenDiffer<HTMLElement>;\n  private jsxDiffer: ListDiffer<string>;\n  private containerElement: HTMLElement;\n  private cameraElement: HTMLElement;\n\n  // life cycle\n  constructor(props: Partial<FlickingProps & FlickingOptions>) {\n    super(props);\n    const options = this.options;\n    for (const name in props) {\n      if (name in DEFAULT_OPTIONS) {\n        options[name] = props[name];\n      }\n    }\n  }\n\n  public render() {\n    const props = this.props;\n    /* tslint:disable:naming-convention */\n    const Tag = props.tag as any;\n    const Viewport = props.viewportTag as any;\n    const Camera = props.cameraTag as any;\n    /* tslint:enable:naming-convention */\n    const classPrefix = props.classPrefix;\n    const attributes: { [key: string]: any } = {};\n\n    for (const name in props) {\n      if (!(name in FLICKING_PROPS) && !(name in DEFAULT_OPTIONS)) {\n        attributes[name] = props[name];\n      }\n    }\n    return (\n      <Tag {...attributes} ref={e => {\n        e && (this.containerElement = e);\n      }}>\n        <Viewport className={`${classPrefix}-viewport`}>\n          <Camera className={`${classPrefix}-camera`} ref={e => {\n            e && (this.cameraElement = e);\n          }}>\n            {this.renderPanels()}\n          </Camera>\n        </Viewport>\n      </Tag>\n    );\n  }\n\n  public componentDidUpdate() {\n    const result = this.childrenDiffer!.update(this.getElements());\n    this.flicking!.sync(result);\n    this.checkPlugins();\n    this.checkCloneCount();\n  }\n\n  public componentDidMount() {\n    this.childrenDiffer = new ChildrenDiffer<HTMLElement>(this.getElements());\n    this.flicking = new NativeFlicking(\n      this.containerElement,\n      {\n        ...this.options,\n        framework: \"react\",\n        frameworkVersion: React.version,\n      } as object,\n    ).on({\n      moveStart: (e: FlickingEvent) => this.props.onMoveStart!(e),\n      move: (e: FlickingEvent) => this.props.onMove!(e),\n      moveEnd: (e: FlickingEvent) => this.props.onMoveEnd!(e),\n      holdStart: (e: FlickingEvent) => this.props.onHoldStart!(e),\n      holdEnd: (e: FlickingEvent) => this.props.onHoldEnd!(e),\n      select: (e: SelectEvent) => this.props.onSelect!(e),\n      needPanel: (e: NeedPanelEvent) => this.props.onNeedPanel!(e),\n      change: (e: ChangeEvent) => this.props.onChange!(e),\n      restore: (e: FlickingEvent) => this.props.onRestore!(e),\n      visibleChange: (e: VisibleChangeEvent) => {\n        this.props.onVisibleChange!(e);\n        this.forceUpdate();\n      },\n      contentLoad: (e: ContentLoadEvent) => {\n        this.props.onContentLoad!(e);\n        this.forceUpdate();\n      },\n      contentError: (e: ContentErrorEvent) => this.props.onContentError!(e)\n    });\n    const children = this.getChildren();\n    this.jsxDiffer = new ListDiffer<string>(children.map(child => `${child.key}`));\n\n    if (this.props.status) {\n      this.setStatus(this.props.status);\n    }\n    this.checkPlugins();\n    this.checkCloneCount();\n\n    if (this.props.renderOnlyVisible) {\n      this.forceUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    this.destroy({ preserveUI: true });\n  }\n\n  // private\n  private checkPlugins() {\n    const { list, added, removed, prevList } = this.pluginsDiffer.update(this.props.plugins!);\n\n    this.flicking!.addPlugins(added.map(index => list[index]));\n    this.flicking!.removePlugins(removed.map(index => prevList[index]));\n  }\n\n  private checkCloneCount() {\n    const cloneCount = this.flicking!.getCloneCount();\n\n    if (this.state.cloneCount !== cloneCount) {\n      this.setState({\n        cloneCount,\n      });\n    }\n  }\n\n  private renderPanels() {\n    const { renderOnlyVisible } = this.props;\n    const flicking = this.flicking;\n    const reactChildren = this.getChildren();\n    let panels: Array<React.ReactElement<any>>;\n\n    if (flicking && renderOnlyVisible) {\n      const diffResult = this.jsxDiffer.update(reactChildren.map(child => `${child.key}`));\n      const panelCnt = reactChildren.length;\n\n      flicking.beforeSync(diffResult);\n\n      const indexesToRender = flicking.getRenderingIndexes(diffResult);\n      panels = indexesToRender.map(index => {\n        if (index >= panelCnt) {\n          const relativeIndex = index % panelCnt;\n          const cloneIndex = Math.floor(index / panelCnt) - 1;\n          const origEl = reactChildren[relativeIndex];\n\n          return <CloneComponent key={`clone${cloneIndex}${origEl.key}`}>{origEl}</CloneComponent>;\n        } else {\n          return reactChildren[index];\n        }\n      });\n    } else {\n      const cloneCount = this.state.cloneCount;\n      panels = [...reactChildren];\n\n      for (let i = 0; i < cloneCount; ++i) {\n        panels = panels.concat(reactChildren.map(el => {\n          return <CloneComponent key={`clone${i}${el.key}`}>{el}</CloneComponent>;\n        }));\n      }\n    }\n\n    return panels;\n  }\n\n  private getChildren() {\n    const children = React.Children.toArray(this.props.children).slice() as Array<React.ReactElement<any>>;\n    return typeof this.props.lastIndex === \"number\"\n      ? children.slice(0, this.props.lastIndex + 1)\n      : children;\n  }\n\n  private getElements(): ListFormat<HTMLElement> {\n    return this.cameraElement.children as any;\n  }\n}\ninterface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, FlickingType<Flicking> { }\nexport default Flicking;\n"],"names":["__extends","props","children","Component","FLICKING_PROPS","tag","viewportTag","cameraTag","classPrefix","plugins","onNeedPanel","e","onMoveStart","onMove","onMoveEnd","onHoldStart","onHoldEnd","onRestore","onSelect","onChange","onContentLoad","onContentError","onVisibleChange","_super","_this","cloneCount","DEFAULT_OPTIONS","renderExternal","ListDiffer","options","name","Tag","Viewport","Camera","attributes","React","ref","containerElement","className","cameraElement","renderPanels","result","childrenDiffer","update","getElements","flicking","sync","checkPlugins","checkCloneCount","ChildrenDiffer","NativeFlicking","__assign","framework","frameworkVersion","on","moveStart","move","moveEnd","holdStart","holdEnd","select","needPanel","change","restore","visibleChange","forceUpdate","contentLoad","contentError","getChildren","jsxDiffer","map","child","key","status","setStatus","renderOnlyVisible","destroy","preserveUI","_a","pluginsDiffer","list","added","removed","prevList","addPlugins","index","removePlugins","getCloneCount","state","setState","reactChildren","panels","diffResult","panelCnt_1","length","beforeSync","indexesToRender","getRenderingIndexes","relativeIndex","cloneIndex","Math","floor","origEl","CloneComponent","i","concat","el","toArray","slice","lastIndex","Flicking","__decorate","withFlickingMethods"],"mappings":"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"}

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/react-flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking
-version: 3.8.0
+version: 3.8.3
 */
 import NativeFlicking, { DEFAULT_OPTIONS, withFlickingMethods } from '@egjs/flicking';
 import { Component, createElement, version, Children } from 'react';
@@ -33,13 +33,14 @@ var extendStatics = function (d, b) {
   } instanceof Array && function (d, b) {
     d.__proto__ = b;
   } || function (d, b) {
-    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
   };
 
   return extendStatics(d, b);
 };
 
 function __extends(d, b) {
+  if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
   extendStatics(d, b);
 
   function __() {
@@ -68,6 +69,8 @@ function __decorate(decorators, target, key, desc) {
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
+/** @deprecated */
+
 function __spreadArrays() {
   for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
 
@@ -109,6 +112,8 @@ var FLICKING_PROPS = {
   onRestore: function (e) {},
   onSelect: function (e) {},
   onChange: function (e) {},
+  onContentLoad: function (e) {},
+  onContentError: function (e) {},
   onVisibleChange: function (e) {}
 };
 
@@ -222,6 +227,14 @@ function (_super) {
         _this.props.onVisibleChange(e);
 
         _this.forceUpdate();
+      },
+      contentLoad: function (e) {
+        _this.props.onContentLoad(e);
+
+        _this.forceUpdate();
+      },
+      contentError: function (e) {
+        return _this.props.onContentError(e);
       }
     });
     var children = this.getChildren();

package/dist/flicking.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"flicking.esm.js","sources":["../src/react-flicking/Clone.tsx","../src/react-flicking/consts.ts","../src/react-flicking/Flicking.tsx"],"sourcesContent":["import { Component } from \"react\";\n\nexport class CloneComponent extends Component {\n  public render() {\n    return this.props.children;\n  }\n}\n","import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent } from \"@egjs/flicking\";\nimport { FlickingProps } from \"./types\";\n\nexport const FLICKING_PROPS: FlickingProps = {\n  tag: \"div\",\n  viewportTag: \"div\",\n  cameraTag: \"div\",\n  classPrefix: \"eg-flick\",\n  plugins: [],\n  onNeedPanel: (e: NeedPanelEvent) => {},\n  onMoveStart: (e: FlickingEvent) => {},\n  onMove: (e: FlickingEvent) => {},\n  onMoveEnd: (e: FlickingEvent) => {},\n  onHoldStart: (e: FlickingEvent) => {},\n  onHoldEnd: (e: FlickingEvent) => {},\n  onRestore: (e: FlickingEvent) => {},\n  onSelect: (e: SelectEvent) => {},\n  onChange: (e: ChangeEvent) => {},\n  onVisibleChange: (e: VisibleChangeEvent) => {},\n};\n","import NativeFlicking, { FlickingOptions, Plugin, FlickingEvent, NeedPanelEvent, withFlickingMethods, DEFAULT_OPTIONS, VisibleChangeEvent, SelectEvent, ChangeEvent } from \"@egjs/flicking\";\nimport * as React from \"react\";\nimport { CloneComponent } from \"./Clone\";\nimport { FLICKING_PROPS } from \"./consts\";\nimport { FlickingProps, FlickingType } from \"./types\";\nimport ListDiffer, { ListFormat } from \"@egjs/list-differ\";\nimport ChildrenDiffer from \"@egjs/children-differ\";\n\nclass Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {\n  public static defaultProps: FlickingProps = FLICKING_PROPS;\n  public state: {\n    cloneCount: number,\n  } = {\n      cloneCount: 0,\n    };\n  // Flicking\n  @withFlickingMethods\n  private flicking?: NativeFlicking | null;\n  private options: FlickingOptions = {\n    ...DEFAULT_OPTIONS,\n    renderExternal: true,\n  };\n  // differ\n  private pluginsDiffer: ListDiffer<Plugin> = new ListDiffer<Plugin>();\n  private childrenDiffer: ChildrenDiffer<HTMLElement>;\n  private jsxDiffer: ListDiffer<string>;\n  private containerElement: HTMLElement;\n  private cameraElement: HTMLElement;\n\n  // life cycle\n  constructor(props: Partial<FlickingProps & FlickingOptions>) {\n    super(props);\n    const options = this.options;\n    for (const name in props) {\n      if (name in DEFAULT_OPTIONS) {\n        options[name] = props[name];\n      }\n    }\n  }\n\n  public render() {\n    const props = this.props;\n    /* tslint:disable:naming-convention */\n    const Tag = props.tag as any;\n    const Viewport = props.viewportTag as any;\n    const Camera = props.cameraTag as any;\n    /* tslint:enable:naming-convention */\n    const classPrefix = props.classPrefix;\n    const attributes: { [key: string]: any } = {};\n\n    for (const name in props) {\n      if (!(name in FLICKING_PROPS) && !(name in DEFAULT_OPTIONS)) {\n        attributes[name] = props[name];\n      }\n    }\n    return (\n      <Tag {...attributes} ref={e => {\n        e && (this.containerElement = e);\n      }}>\n        <Viewport className={`${classPrefix}-viewport`}>\n          <Camera className={`${classPrefix}-camera`} ref={e => {\n            e && (this.cameraElement = e);\n          }}>\n            {this.renderPanels()}\n          </Camera>\n        </Viewport>\n      </Tag>\n    );\n  }\n\n  public componentDidUpdate() {\n    const result = this.childrenDiffer!.update(this.getElements());\n    this.flicking!.sync(result);\n    this.checkPlugins();\n    this.checkCloneCount();\n  }\n\n  public componentDidMount() {\n    this.childrenDiffer = new ChildrenDiffer<HTMLElement>(this.getElements());\n    this.flicking = new NativeFlicking(\n      this.containerElement,\n      {\n        ...this.options,\n        framework: \"react\",\n        frameworkVersion: React.version,\n      } as object,\n    ).on({\n      moveStart: (e: FlickingEvent) => this.props.onMoveStart!(e),\n      move: (e: FlickingEvent) => this.props.onMove!(e),\n      moveEnd: (e: FlickingEvent) => this.props.onMoveEnd!(e),\n      holdStart: (e: FlickingEvent) => this.props.onHoldStart!(e),\n      holdEnd: (e: FlickingEvent) => this.props.onHoldEnd!(e),\n      select: (e: SelectEvent) => this.props.onSelect!(e),\n      needPanel: (e: NeedPanelEvent) => this.props.onNeedPanel!(e),\n      change: (e: ChangeEvent) => this.props.onChange!(e),\n      restore: (e: FlickingEvent) => this.props.onRestore!(e),\n      visibleChange: (e: VisibleChangeEvent) => {\n        this.props.onVisibleChange!(e);\n        this.forceUpdate();\n      },\n    });\n    const children = this.getChildren();\n    this.jsxDiffer = new ListDiffer<string>(children.map(child => `${child.key}`));\n\n    if (this.props.status) {\n      this.setStatus(this.props.status);\n    }\n    this.checkPlugins();\n    this.checkCloneCount();\n\n    if (this.props.renderOnlyVisible) {\n      this.forceUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    this.destroy({ preserveUI: true });\n  }\n\n  // private\n  private checkPlugins() {\n    const { list, added, removed, prevList } = this.pluginsDiffer.update(this.props.plugins!);\n\n    this.flicking!.addPlugins(added.map(index => list[index]));\n    this.flicking!.removePlugins(removed.map(index => prevList[index]));\n  }\n\n  private checkCloneCount() {\n    const cloneCount = this.flicking!.getCloneCount();\n\n    if (this.state.cloneCount !== cloneCount) {\n      this.setState({\n        cloneCount,\n      });\n    }\n  }\n\n  private renderPanels() {\n    const { renderOnlyVisible } = this.props;\n    const flicking = this.flicking;\n    const reactChildren = this.getChildren();\n    let panels: Array<React.ReactElement<any>>;\n\n    if (flicking && renderOnlyVisible) {\n      const diffResult = this.jsxDiffer.update(reactChildren.map(child => `${child.key}`));\n      const panelCnt = reactChildren.length;\n\n      flicking.beforeSync(diffResult);\n\n      const indexesToRender = flicking.getRenderingIndexes(diffResult);\n      panels = indexesToRender.map(index => {\n        if (index >= panelCnt) {\n          const relativeIndex = index % panelCnt;\n          const cloneIndex = Math.floor(index / panelCnt) - 1;\n          const origEl = reactChildren[relativeIndex];\n\n          return <CloneComponent key={`clone${cloneIndex}${origEl.key}`}>{origEl}</CloneComponent>;\n        } else {\n          return reactChildren[index];\n        }\n      });\n    } else {\n      const cloneCount = this.state.cloneCount;\n      panels = [...reactChildren];\n\n      for (let i = 0; i < cloneCount; ++i) {\n        panels = panels.concat(reactChildren.map(el => {\n          return <CloneComponent key={`clone${i}${el.key}`}>{el}</CloneComponent>;\n        }));\n      }\n    }\n\n    return panels;\n  }\n\n  private getChildren() {\n    const children = React.Children.toArray(this.props.children).slice() as Array<React.ReactElement<any>>;\n    return typeof this.props.lastIndex === \"number\"\n      ? children.slice(0, this.props.lastIndex + 1)\n      : children;\n  }\n\n  private getElements(): ListFormat<HTMLElement> {\n    return this.cameraElement.children as any;\n  }\n}\ninterface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, FlickingType<Flicking> { }\nexport default Flicking;\n"],"names":["__extends","props","children","Component","FLICKING_PROPS","tag","viewportTag","cameraTag","classPrefix","plugins","onNeedPanel","e","onMoveStart","onMove","onMoveEnd","onHoldStart","onHoldEnd","onRestore","onSelect","onChange","onVisibleChange","_super","_this","cloneCount","DEFAULT_OPTIONS","renderExternal","ListDiffer","options","name","Tag","Viewport","Camera","attributes","React","ref","containerElement","className","cameraElement","renderPanels","result","childrenDiffer","update","getElements","flicking","sync","checkPlugins","checkCloneCount","ChildrenDiffer","NativeFlicking","__assign","framework","frameworkVersion","on","moveStart","move","moveEnd","holdStart","holdEnd","select","needPanel","change","restore","visibleChange","forceUpdate","getChildren","jsxDiffer","map","child","key","status","setStatus","renderOnlyVisible","destroy","preserveUI","_a","pluginsDiffer","list","added","removed","prevList","addPlugins","index","removePlugins","getCloneCount","state","setState","reactChildren","panels","diffResult","panelCnt_1","length","beforeSync","indexesToRender","getRenderingIndexes","relativeIndex","cloneIndex","Math","floor","origEl","CloneComponent","i","concat","el","toArray","slice","lastIndex","Flicking","__decorate","withFlickingMethods"],"mappings":"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"}
+{"version":3,"file":"flicking.esm.js","sources":["../src/react-flicking/Clone.tsx","../src/react-flicking/consts.ts","../src/react-flicking/Flicking.tsx"],"sourcesContent":["import { Component } from \"react\";\n\nexport class CloneComponent extends Component {\n  public render() {\n    return this.props.children;\n  }\n}\n","import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent, ContentLoadEvent, ContentErrorEvent } from \"@egjs/flicking\";\nimport { FlickingProps } from \"./types\";\n\nexport const FLICKING_PROPS: FlickingProps = {\n  tag: \"div\",\n  viewportTag: \"div\",\n  cameraTag: \"div\",\n  classPrefix: \"eg-flick\",\n  plugins: [],\n  onNeedPanel: (e: NeedPanelEvent) => {},\n  onMoveStart: (e: FlickingEvent) => {},\n  onMove: (e: FlickingEvent) => {},\n  onMoveEnd: (e: FlickingEvent) => {},\n  onHoldStart: (e: FlickingEvent) => {},\n  onHoldEnd: (e: FlickingEvent) => {},\n  onRestore: (e: FlickingEvent) => {},\n  onSelect: (e: SelectEvent) => {},\n  onChange: (e: ChangeEvent) => {},\n  onContentLoad: (e: ContentLoadEvent) => {},\n  onContentError: (e: ContentErrorEvent) => {},\n  onVisibleChange: (e: VisibleChangeEvent) => {},\n};\n","import NativeFlicking, {\n  FlickingOptions,\n  Plugin,\n  FlickingEvent,\n  NeedPanelEvent,\n  withFlickingMethods,\n  DEFAULT_OPTIONS,\n  VisibleChangeEvent,\n  SelectEvent,\n  ChangeEvent,\n  ContentLoadEvent,\n  ContentErrorEvent\n} from \"@egjs/flicking\";\nimport * as React from \"react\";\nimport { CloneComponent } from \"./Clone\";\nimport { FLICKING_PROPS } from \"./consts\";\nimport { FlickingProps, FlickingType } from \"./types\";\nimport ListDiffer, { ListFormat } from \"@egjs/list-differ\";\nimport ChildrenDiffer from \"@egjs/children-differ\";\n\nclass Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>> {\n  public static defaultProps: FlickingProps = FLICKING_PROPS;\n  public state: {\n    cloneCount: number,\n  } = {\n      cloneCount: 0,\n    };\n  // Flicking\n  @withFlickingMethods\n  private flicking?: NativeFlicking | null;\n  private options: FlickingOptions = {\n    ...DEFAULT_OPTIONS,\n    renderExternal: true,\n  };\n  // differ\n  private pluginsDiffer: ListDiffer<Plugin> = new ListDiffer<Plugin>();\n  private childrenDiffer: ChildrenDiffer<HTMLElement>;\n  private jsxDiffer: ListDiffer<string>;\n  private containerElement: HTMLElement;\n  private cameraElement: HTMLElement;\n\n  // life cycle\n  constructor(props: Partial<FlickingProps & FlickingOptions>) {\n    super(props);\n    const options = this.options;\n    for (const name in props) {\n      if (name in DEFAULT_OPTIONS) {\n        options[name] = props[name];\n      }\n    }\n  }\n\n  public render() {\n    const props = this.props;\n    /* tslint:disable:naming-convention */\n    const Tag = props.tag as any;\n    const Viewport = props.viewportTag as any;\n    const Camera = props.cameraTag as any;\n    /* tslint:enable:naming-convention */\n    const classPrefix = props.classPrefix;\n    const attributes: { [key: string]: any } = {};\n\n    for (const name in props) {\n      if (!(name in FLICKING_PROPS) && !(name in DEFAULT_OPTIONS)) {\n        attributes[name] = props[name];\n      }\n    }\n    return (\n      <Tag {...attributes} ref={e => {\n        e && (this.containerElement = e);\n      }}>\n        <Viewport className={`${classPrefix}-viewport`}>\n          <Camera className={`${classPrefix}-camera`} ref={e => {\n            e && (this.cameraElement = e);\n          }}>\n            {this.renderPanels()}\n          </Camera>\n        </Viewport>\n      </Tag>\n    );\n  }\n\n  public componentDidUpdate() {\n    const result = this.childrenDiffer!.update(this.getElements());\n    this.flicking!.sync(result);\n    this.checkPlugins();\n    this.checkCloneCount();\n  }\n\n  public componentDidMount() {\n    this.childrenDiffer = new ChildrenDiffer<HTMLElement>(this.getElements());\n    this.flicking = new NativeFlicking(\n      this.containerElement,\n      {\n        ...this.options,\n        framework: \"react\",\n        frameworkVersion: React.version,\n      } as object,\n    ).on({\n      moveStart: (e: FlickingEvent) => this.props.onMoveStart!(e),\n      move: (e: FlickingEvent) => this.props.onMove!(e),\n      moveEnd: (e: FlickingEvent) => this.props.onMoveEnd!(e),\n      holdStart: (e: FlickingEvent) => this.props.onHoldStart!(e),\n      holdEnd: (e: FlickingEvent) => this.props.onHoldEnd!(e),\n      select: (e: SelectEvent) => this.props.onSelect!(e),\n      needPanel: (e: NeedPanelEvent) => this.props.onNeedPanel!(e),\n      change: (e: ChangeEvent) => this.props.onChange!(e),\n      restore: (e: FlickingEvent) => this.props.onRestore!(e),\n      visibleChange: (e: VisibleChangeEvent) => {\n        this.props.onVisibleChange!(e);\n        this.forceUpdate();\n      },\n      contentLoad: (e: ContentLoadEvent) => {\n        this.props.onContentLoad!(e);\n        this.forceUpdate();\n      },\n      contentError: (e: ContentErrorEvent) => this.props.onContentError!(e)\n    });\n    const children = this.getChildren();\n    this.jsxDiffer = new ListDiffer<string>(children.map(child => `${child.key}`));\n\n    if (this.props.status) {\n      this.setStatus(this.props.status);\n    }\n    this.checkPlugins();\n    this.checkCloneCount();\n\n    if (this.props.renderOnlyVisible) {\n      this.forceUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    this.destroy({ preserveUI: true });\n  }\n\n  // private\n  private checkPlugins() {\n    const { list, added, removed, prevList } = this.pluginsDiffer.update(this.props.plugins!);\n\n    this.flicking!.addPlugins(added.map(index => list[index]));\n    this.flicking!.removePlugins(removed.map(index => prevList[index]));\n  }\n\n  private checkCloneCount() {\n    const cloneCount = this.flicking!.getCloneCount();\n\n    if (this.state.cloneCount !== cloneCount) {\n      this.setState({\n        cloneCount,\n      });\n    }\n  }\n\n  private renderPanels() {\n    const { renderOnlyVisible } = this.props;\n    const flicking = this.flicking;\n    const reactChildren = this.getChildren();\n    let panels: Array<React.ReactElement<any>>;\n\n    if (flicking && renderOnlyVisible) {\n      const diffResult = this.jsxDiffer.update(reactChildren.map(child => `${child.key}`));\n      const panelCnt = reactChildren.length;\n\n      flicking.beforeSync(diffResult);\n\n      const indexesToRender = flicking.getRenderingIndexes(diffResult);\n      panels = indexesToRender.map(index => {\n        if (index >= panelCnt) {\n          const relativeIndex = index % panelCnt;\n          const cloneIndex = Math.floor(index / panelCnt) - 1;\n          const origEl = reactChildren[relativeIndex];\n\n          return <CloneComponent key={`clone${cloneIndex}${origEl.key}`}>{origEl}</CloneComponent>;\n        } else {\n          return reactChildren[index];\n        }\n      });\n    } else {\n      const cloneCount = this.state.cloneCount;\n      panels = [...reactChildren];\n\n      for (let i = 0; i < cloneCount; ++i) {\n        panels = panels.concat(reactChildren.map(el => {\n          return <CloneComponent key={`clone${i}${el.key}`}>{el}</CloneComponent>;\n        }));\n      }\n    }\n\n    return panels;\n  }\n\n  private getChildren() {\n    const children = React.Children.toArray(this.props.children).slice() as Array<React.ReactElement<any>>;\n    return typeof this.props.lastIndex === \"number\"\n      ? children.slice(0, this.props.lastIndex + 1)\n      : children;\n  }\n\n  private getElements(): ListFormat<HTMLElement> {\n    return this.cameraElement.children as any;\n  }\n}\ninterface Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>, FlickingType<Flicking> { }\nexport default Flicking;\n"],"names":["__extends","props","children","Component","FLICKING_PROPS","tag","viewportTag","cameraTag","classPrefix","plugins","onNeedPanel","e","onMoveStart","onMove","onMoveEnd","onHoldStart","onHoldEnd","onRestore","onSelect","onChange","onContentLoad","onContentError","onVisibleChange","_super","_this","cloneCount","DEFAULT_OPTIONS","renderExternal","ListDiffer","options","name","Tag","Viewport","Camera","attributes","React","ref","containerElement","className","cameraElement","renderPanels","result","childrenDiffer","update","getElements","flicking","sync","checkPlugins","checkCloneCount","ChildrenDiffer","NativeFlicking","__assign","framework","frameworkVersion","on","moveStart","move","moveEnd","holdStart","holdEnd","select","needPanel","change","restore","visibleChange","forceUpdate","contentLoad","contentError","getChildren","jsxDiffer","map","child","key","status","setStatus","renderOnlyVisible","destroy","preserveUI","_a","pluginsDiffer","list","added","removed","prevList","addPlugins","index","removePlugins","getCloneCount","state","setState","reactChildren","panels","diffResult","panelCnt_1","length","beforeSync","indexesToRender","getRenderingIndexes","relativeIndex","cloneIndex","Math","floor","origEl","CloneComponent","i","concat","el","toArray","slice","lastIndex","Flicking","__decorate","withFlickingMethods"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egjs/react-flicking",
-  "version": "3.8.0",
+  "version": "3.8.3",
   "description": "Everyday 30 million people experience. It's reliable, flexible and extendable carousel.",
   "main": "dist/flicking.cjs.js",
   "module": "dist/flicking.esm.js",
@@ -9,7 +9,7 @@
   "types": "declaration/index.d.ts",
   "dependencies": {
     "@egjs/children-differ": "^1.0.1",
-    "@egjs/flicking": "^3.9.0",
+    "@egjs/flicking": "~3.9.3",
     "@egjs/list-differ": "^1.0.0"
   },
   "devDependencies": {
@@ -20,10 +20,12 @@
     "@types/node": "12.0.0",
     "@types/react": "16.8.17",
     "@types/react-dom": "16.8.4",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
     "highlight.js": "^9.15.6",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "^5.0.0",
     "typescript": "^3.9.7"
   },
   "repository": {

package/src/demo/App.tsx

@@ -1,6 +1,7 @@
 
 import { Component } from "react";
 import * as React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import "./css/common.css";
 import "./css/features.css";
 import "./css/highlight.css";
@@ -13,6 +14,7 @@ import Snap from "./features/Snap";
 import Gap from "./features/Gap";
 import Progress from "./features/Progress";
 import Bound from "./features/Bound";
+import ImageLoadDemo from "./features/Image";
 import ParallaxDemo from "./plugins/Parallax";
 import FadeDemo from "./plugins/Fade";
 import AutoPlayDemo from "./plugins/AutoPlay";
@@ -21,20 +23,26 @@ import Header from "./Header";
 export default class App extends Component<{}> {
   public render() {
     return (
-      <div>
-        <Header/>
-        <InfiniteFlicking/>
-        <FreeScroll/>
-        <VariableSize/>
-        <Align/>
-        <Snap/>
-        <Gap/>
-        <Progress/>
-        <Bound/>
-        <ParallaxDemo/>
-        <FadeDemo/>
-        <AutoPlayDemo/>
-      </div>);
+      <BrowserRouter>
+        <div>
+          <Header/>
+          <Routes>
+            <Route path="/infinite" element={<InfiniteFlicking/>}></Route>
+            <Route path="/free-scroll" element={<FreeScroll/>}></Route>
+            <Route path="/variable-size" element={<VariableSize/>}></Route>
+            <Route path="/align" element={<Align/>}></Route>
+            <Route path="/snap" element={<Snap/>}></Route>
+            <Route path="/gap" element={<Gap/>}></Route>
+            <Route path="/progress" element={<Progress/>}></Route>
+            <Route path="/bound" element={<Bound/>}></Route>
+            <Route path="/image" element={<ImageLoadDemo />}></Route>
+            <Route path="/parallax" element={<ParallaxDemo/>}></Route>
+            <Route path="/fade" element={<FadeDemo/>}></Route>
+            <Route path="/autoplay" element={<AutoPlayDemo/>}></Route>
+          </Routes>
+        </div>
+      </BrowserRouter>
+    );
   }
   public componentDidMount() {
     hljs.initHighlighting();

package/src/demo/Header.tsx

@@ -1,20 +1,22 @@
 import * as React from "react";
+import { Link } from "react-router-dom";
 
 export default class Header extends React.Component {
   public render() {
     return (
       <ul className="header">
-        <li><a href="#infinite">Infinite Flicking</a></li>
-        <li><a href="#free-scroll">Free Scroll</a></li>
-        <li><a href="#variable-size">Variable Size</a></li>
-        <li><a href="#align">Align</a></li>
-        <li><a href="#snap">Snap</a></li>
-        <li><a href="#gap">Gap</a></li>
-        <li><a href="#progress">Progress</a></li>
-        <li><a href="#bound">Bound</a></li>
-        <li><a href="#parallax">Parallax Plugin</a></li>
-        <li><a href="#fade">Fade Plugin</a></li>
-        <li><a href="#autoplay">AutoPlay Plugin</a></li>
+        <li><Link to="/infinite">Infinite Flicking</Link></li>
+        <li><Link to="/free-scroll">Free Scroll</Link></li>
+        <li><Link to="/variable-size">Variable Size</Link></li>
+        <li><Link to="/align">Align</Link></li>
+        <li><Link to="/snap">Snap</Link></li>
+        <li><Link to="/gap">Gap</Link></li>
+        <li><Link to="/progress">Progress</Link></li>
+        <li><Link to="/bound">Bound</Link></li>
+        <li><Link to="/image">Image</Link></li>
+        <li><Link to="/parallax">Parallax Plugin</Link></li>
+        <li><Link to="/fade">Fade Plugin</Link></li>
+        <li><Link to="/autoplay">AutoPlay Plugin</Link></li>
       </ul>
     );
   }

package/src/demo/features/Image.tsx

@@ -0,0 +1,24 @@
+
+import * as React from "react";
+import Flicking from "../../react-flicking/Flicking";
+import "../css/infinite.css";
+
+export default class ImageLoadDemo extends React.Component<{}, { show: boolean }> {
+  public state = {
+    show: false
+  };
+
+  public render() {
+    console.log("rendering")
+    return (
+      <div id="image" className="container">
+        <button onClick={() => { this.setState({ show: true }); }}>Click me</button>
+        {this.state.show && <Flicking circular={true} duration={300} resizeOnContentsReady={true}>
+            <img src="https://picsum.photos/seed/1/200/300" />
+            <img src="https://picsum.photos/seed/2/200/300" />
+            <img src="https://picsum.photos/seed/3/200/300" />
+        </Flicking>}
+      </div>
+    );
+  }
+}

package/src/react-flicking/Flicking.tsx

@@ -1,4 +1,16 @@
-import NativeFlicking, { FlickingOptions, Plugin, FlickingEvent, NeedPanelEvent, withFlickingMethods, DEFAULT_OPTIONS, VisibleChangeEvent, SelectEvent, ChangeEvent } from "@egjs/flicking";
+import NativeFlicking, {
+  FlickingOptions,
+  Plugin,
+  FlickingEvent,
+  NeedPanelEvent,
+  withFlickingMethods,
+  DEFAULT_OPTIONS,
+  VisibleChangeEvent,
+  SelectEvent,
+  ChangeEvent,
+  ContentLoadEvent,
+  ContentErrorEvent
+} from "@egjs/flicking";
 import * as React from "react";
 import { CloneComponent } from "./Clone";
 import { FLICKING_PROPS } from "./consts";
@@ -98,6 +110,11 @@ class Flicking extends React.Component<Partial<FlickingProps & FlickingOptions>>
         this.props.onVisibleChange!(e);
         this.forceUpdate();
       },
+      contentLoad: (e: ContentLoadEvent) => {
+        this.props.onContentLoad!(e);
+        this.forceUpdate();
+      },
+      contentError: (e: ContentErrorEvent) => this.props.onContentError!(e)
     });
     const children = this.getChildren();
     this.jsxDiffer = new ListDiffer<string>(children.map(child => `${child.key}`));

package/src/react-flicking/consts.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent } from "@egjs/flicking";
+import { ChangeEvent, FlickingEvent, SelectEvent, NeedPanelEvent, VisibleChangeEvent, ContentLoadEvent, ContentErrorEvent } from "@egjs/flicking";
 import { FlickingProps } from "./types";
 
 export const FLICKING_PROPS: FlickingProps = {
@@ -16,5 +16,7 @@ export const FLICKING_PROPS: FlickingProps = {
   onRestore: (e: FlickingEvent) => {},
   onSelect: (e: SelectEvent) => {},
   onChange: (e: ChangeEvent) => {},
+  onContentLoad: (e: ContentLoadEvent) => {},
+  onContentError: (e: ContentErrorEvent) => {},
   onVisibleChange: (e: VisibleChangeEvent) => {},
 };

package/src/react-flicking/types.ts

@@ -1,4 +1,15 @@
-import { ChangeEvent, FlickingEvent, SelectEvent, Plugin, NeedPanelEvent, FlickingStatus, FlickingMethods, VisibleChangeEvent } from "@egjs/flicking";
+import {
+  ChangeEvent,
+  FlickingEvent,
+  SelectEvent,
+  Plugin,
+  NeedPanelEvent,
+  FlickingStatus,
+  FlickingMethods,
+  VisibleChangeEvent,
+  ContentErrorEvent,
+  ContentLoadEvent
+} from "@egjs/flicking";
 import NativeFlicking from "@egjs/flicking";
 
 export type ParametersType<T, R> = T extends (...params: infer U) => any ? (...params: U) => R : never;
@@ -19,10 +30,12 @@ export interface FlickingProps {
   onMoveStart: (e: FlickingEvent) => any;
   onMove: (e: FlickingEvent) => any;
   onMoveEnd: (e: FlickingEvent) => any;
+  onChange: (e: ChangeEvent) => any;
   onRestore: (e: FlickingEvent) => any;
   onSelect: (e: SelectEvent) => any;
-  onChange: (e: ChangeEvent) => any;
   onNeedPanel: (e: NeedPanelEvent) => any;
   onVisibleChange: (e: VisibleChangeEvent) => any;
+  onContentLoad: (e: ContentLoadEvent) => any;
+  onContentError: (e: ContentErrorEvent) => any;
   [key: string]: any;
 }