├── LICENSE ├── README.md ├── bower.json ├── npm-react-swf ├── README.md ├── compat.js ├── package.json └── react-swf.js ├── package.json ├── react-swf-compat.js ├── react-swf-compat.min.js ├── react-swf.js └── react-swf.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Andreas Svensson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ReactSWF ![](https://img.shields.io/github/release/syranide/react-swf.svg) ![](https://img.shields.io/badge/npm-react--swf-blue.svg) ![](https://img.shields.io/badge/bower-react--swf-blue.svg) 2 | 3 | Shockwave Flash Player component for React. GCC `ADVANCED` optimizations compatible. 4 | 5 | Supports all browsers supported by React. ReactSWFCompat is required to support IE8-9. 6 | 7 | Depends on [`Object.is()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Polyfill_for_non-ES6_browsers) and [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill) 8 | 9 | Use [SWFPlayerVersion](https://github.com/syranide/swf-player-version) to determine SWF Player support. 10 | 11 | ```jsx 12 | 20 | ``` 21 | ```jsx 22 | const SWF_ID_PREFIX = '__MyExternalInterfaceExample_SWFID_'; 23 | const SWF_CALL_NAME_PREFIX = '__MyExternalInterfaceExample_SWFCall_'; 24 | 25 | let nextUID = 0; 26 | 27 | class MyExternalInterfaceExample extends React.Component { 28 | constructor(props) { 29 | super(props); 30 | 31 | // For most purposes nextUID is sufficient. However, if you rely on 32 | // non-trivial server rendering you must generate deterministic UIDs per 33 | // React root to avoid markup mismatch. 34 | this._uid = nextUID++; 35 | 36 | window[SWF_CALL_NAME_PREFIX + this._uid] = this.handleSWFCall.bind(this); 37 | } 38 | 39 | componentWillUnmount() { 40 | delete window[SWF_CALL_NAME_PREFIX + this._uid]; 41 | } 42 | 43 | handleSWFCall() { 44 | // Beware; SWF calls are executed in the context of SWF Player. 45 | console.log('SWFCall', arguments); 46 | return 'foobar'; 47 | } 48 | 49 | invokeSWFMyCallback(arg) { 50 | // Beware; SWF Player does not sufficiently escape serialized arguments. 51 | return this._swfPlayerNode.myCallback(arg); 52 | } 53 | 54 | render() { 55 | // Globally unique ID is required for ExternalInterface callbacks in IE<11. 56 | return ( 57 | this._swfPlayerNode = c} 60 | id={SWF_ID_PREFIX + this._uid} 61 | flashVars={{myCallbackName: SWF_CALL_NAME_PREFIX + this._uid}} 62 | /> 63 | ); 64 | } 65 | } 66 | ``` 67 | 68 | ## ReactSWFCompat 69 | 70 | ReactSWFCompat (`require('react-swf/compat')`) also supports IE8-9, but should only be used if you must support these browsers. Internally it uses `ReactDOMServer.renderToString` to render to markup and then immediately `ReactDOM.render` on-top of that. There may be some behavioral differences in edge-cases but overall it should behave just the same. Due to the design of React you are required to provide a container element, the SWF-markup will be rendered inside. 71 | 72 | ```jsx 73 | } 75 | src="example.swf" 76 | id="guid_001" 77 | width="300" 78 | height="200" 79 | wmode="transparent" 80 | flashVars={{foo: 'A', bar: 1}} 81 | /> 82 | ``` 83 | 84 | ## Breaking changes 85 | 86 | #### 1.0.0 87 | 88 | * IE8-9 is no longer supported due to issues with the new DOM renderer in React 15. `ReactSWFCompat` has been introduced as a workaround to this. 89 | 90 | #### 0.13.0 91 | 92 | * `getFPVersion` and `isFPVersionSupported` forked to [SWFPlayerVersion](https://github.com/syranide/swf-player-version) and dropped from ReactSWF. Replace `ReactSWF.getFPVersion => SWFPlayerVersion.get` and `ReactSWF.isFPVersionSupported => SWFPlayerVersion.isSupported`. 93 | 94 | #### 0.12.3 95 | 96 | * Depends on `Object.assign()`, [polyfills are available](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill). 97 | 98 | #### 0.11.0 99 | 100 | * React 0.13 components no longer support `ref.getDOMNode()`, use `ref.getFPDOMNode()` instead. 101 | * Depends on `Object.is()`, [polyfills are available](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Polyfill_for_non-ES6_browsers). 102 | 103 | ## Properties 104 | 105 | Standard DOM properties are forwarded to the underlying `