Adobe Animate React component

[![npm](https://badgen.net/npm/v/react-adobe-animate)](https://www.npmjs.com/package/react-adobe-animate) [![npm](https://badgen.net/npm/dt/react-adobe-animate)](https://www.npmjs.com/package/react-adobe-animate) [![npm](https://badgen.net/npm/dm/react-adobe-animate)](https://www.npmjs.com/package/react-adobe-animate) [![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/bibixx/react-adobe-animate)](https://snyk.io/test/github/bibixx/react-adobe-animate) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://badgen.net/badge/commitizen/friendly/green)](http://commitizen.github.io/cz-cli/) > The component for embedding animations from Adobe Animate.
Table of contents
  1. Installation
  2. Examples
  3. Dependencies
  4. How to use
  5. 🙋‍♂️ Questions
  6. 🤝 Contributing
  7. Show your support
  8. 📝 License
## Installation ```bash npm install react-adobe-animate # or yarn add react-adobe-animate ``` ## Examples * `react-adobe-animate` with standard React project using Vite – [examples/vite/src/App.tsx](./examples/vite/src/App.tsx) ([Sandbox](https://githubbox.com/bibixx/react-adobe-animate/tree/main/examples/vite)) * `react-adobe-animate` with using Next.js – [examples/next/pages/index.tsx](./examples/next/pages/index.tsx) ([Sandbox](https://githubbox.com/bibixx/react-adobe-animate/tree/main/examples/next)) ## Dependencies * React * CreateJS – add this to your page `` * Your animation – add .js file exported from Adobe Animate to page with ` ``` #### App.tsx `react-adobe-animate` exposes a `AnimateCC` component used to render the animation. For more details on the props passed to the component please see [Props](#props). ```tsx import { useState } from "react"; import { AnimateCC, GetAnimationObjectParameter } from "react-adobe-animate"; const App = () => { const [paused, setPaused] = useState(true); const [animationObject, getAnimationObject] = useState(null); const onClick = () => setPaused(!paused); console.log(animationObject); return (

); }; ``` ### 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) with the `Script` component. For detailed example see [examples/next/pages/index.tsx](./examples/next/pages/index.tsx). ### Props | Prop name | Type | Required | Description | | ------------------ | -------- | -------- | ------------ | | animationName | string | true | Name of animation (`exportRoot = new lib.animationName();` in js file. There the name is `(lib.animationName = function`. Also usually name of published file) | | composition | string | false | If you have two animations with same name you can specify an id of that animation. You can get it from .html file generate by Adobe Animate (`var comp=AdobeAn.getComposition("C1475B64B160904BB90B34246A5FF54B");`) | | getAnimationObject | function | false | It is fired after component was mounted. It takes 1 argument – animation object that enables you to fire functions created in Adobe Animate | | paused | boolean | false | Whether an animation should be paused | | onError | function | false | Function called whenever an error is thrown inside the component | All other props will be passed to div surrounding canvas ### FAQ #### How do I insert animations published from the same file? Unfortunately it isn't possible to export from Adobe Animate two unique animations. However you can make one! Simply replace all occurrences of composition id inside your .js file of an animation to one created by you. Composition id is this long string in `var comp=AdobeAn.getComposition("C1475B64B160904BB90B34246A5FF54B");` found in .html file published by Adobe Animate. ## 🙋‍♂️ Questions Should you have any questions on how to use/setup the component feel free to ask you questions on the [discussions page](https://github.com/bibixx/react-adobe-animate/discussions). ## 🤝 Contributing Contributions, issues and feature requests are welcome!\ Feel free to check [issues page](https://github.com/bibixx/react-adobe-animate/issues). For development purposes you can use the `examples` folder. \ You'll find instructions on how to use it in [`examples/README.md`](https://github.com/bibixx/react-adobe-animate/blob/main/example/README.md) ## Show your support Give a ⭐️ if this project helped you! ## 📝 License Copyright © 2019-2022 [bibixx](https://github.com/bibixx) .
This project is [MIT](https://github.com/bibixx/react-adobe-animate/blob/main/LICENSE.md) licensed.