Merge pull request #44 from bibixx/fix/add-semi-ssr-setup

Add ssr support
bibixx · Feb 6, 2021 · 2c1ab11 · 2c1ab11
2 parents 8b624f7 + c7f9ff0
commit 2c1ab11
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,48 @@ const App = () => {
 };
 ```
 
+### Next.js
+To use the component with [Next.js](https://github.com/vercel/next.js/) you have to include CreateJS and Animate files (you have to put those into `public` folder first) in `Head` component.
+
+#### pages/index.tsx
+```tsx
+import { useState } from "react";
+import Head from 'next/head';
+import AnimateCC, { GetAnimationObjectParameter } from "react-adobe-animate";
+
+export default function Home() {
+  const [paused, setPaused] = useState(true);
+  const [animationObject, getAnimationObject] = useState<GetAnimationObjectParameter|null>(null);
+  const onClick = () => setPaused(!paused);
+
+  console.log(animationObject);
+
+  return (
+    <div style={{ width: "400px" }}>
+      <Head>
+        <script src="https://code.createjs.com/1.0.0/createjs.min.js" type="text/javascript"></script>
+        <script src="/lishtml5.js" type="text/javascript"></script>
+        <script src="/lishtml5-with-background.js" type="text/javascript"></script>
+      </Head>
+
+      <AnimateCC
+        animationName="lishtml5"
+        getAnimationObject={getAnimationObject}
+        paused={paused}
+      />
+
+      <AnimateCC
+        animationName="lishtml5"
+        composition="C1475B64B160904BB90B34246A5FF54B"
+        paused={paused}
+      />
+
+      <button onClick={onClick}>{paused ? "Unpause" : "Pause"}</button><br />
+    </div>
+  );
+}
+```
+
 ### Props
 
 | Prop name | Type | Required | Description  |

diff --git a/src/AnimateCC/AnimateCC.tsx b/src/AnimateCC/AnimateCC.tsx
@@ -25,6 +25,10 @@ export class AnimateCC extends React.Component<Props, State> {
   };
 
   componentDidMount() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
     const { animationName, composition: externalCompositionId } = this.props;
 
     const compositionId = getCompositionId(animationName, externalCompositionId);
@@ -202,6 +206,10 @@ export class AnimateCC extends React.Component<Props, State> {
       ...props
     } = this.props;
 
+    if (typeof window === 'undefined') {
+      return null;
+    }
+
     const { properties } = this.state;
     const { width: canvasWidth, height: canvasHeight } = this.getCanvasSize();
 

diff --git a/src/utils/AdobeAn/AdobeAn.ts b/src/utils/AdobeAn/AdobeAn.ts
@@ -1,8 +1,8 @@
 import { AnimateCCError } from '../AnimateCCError';
 import { An } from './types';
 
-export const AdobeAn = (window as any).AdobeAn as An;
+export const AdobeAn = (global as any).AdobeAn as An;
 
-if (AdobeAn === undefined) {
+if (typeof window !== 'undefined' && AdobeAn === undefined) {
   throw new AnimateCCError('AdobeAn dependency not found');
 }
diff --git a/src/utils/CreateJS/CreateJS.ts b/src/utils/CreateJS/CreateJS.ts
@@ -1,8 +1,8 @@
 import type createjs from 'createjs-module';
 import { AnimateCCError } from '../AnimateCCError';
 
-export const CreateJS = window.createjs as typeof createjs;
+export const CreateJS = global.createjs as typeof createjs;
 
-if (CreateJS === undefined) {
+if (typeof window !== 'undefined' && CreateJS === undefined) {
   throw new AnimateCCError('createjs dependency not found');
 }