react-swf

ReactSWF 

Shockwave Flash Player component for React. GCC ADVANCED optimizations compatible.

Supports all browsers supported by React. ReactSWFCompat is required to support IE8-9.

Depends on Object.is() and Object.assign()

Use SWFPlayerVersion to determine SWF Player support.

``jsx
src="example.swf"
id="guid_001"
width="300"
height="200"
wmode="transparent"
flashVars={{foo: 'A', bar: 1}}
/>
`
`jsx
const SWF_ID_PREFIX = '__MyExternalInterfaceExample_SWFID_';
const SWF_CALL_NAME_PREFIX = '__MyExternalInterfaceExample_SWFCall_';

let nextUID = 0;

class MyExternalInterfaceExample extends React.Component {
constructor(props) {
super(props);

// For most purposes nextUID is sufficient. However, if you rely on
// non-trivial server rendering you must generate deterministic UIDs per
// React root to avoid markup mismatch.
this._uid = nextUID++;

window[SWF_CALL_NAME_PREFIX + this._uid] = this.handleSWFCall.bind(this);
}

componentWillUnmount() {
delete window[SWF_CALL_NAME_PREFIX + this._uid];
}

handleSWFCall() {
// Beware; SWF calls are executed in the context of SWF Player.
console.log('SWFCall', arguments);
return 'foobar';
}

invokeSWFMyCallback(arg) {
// Beware; SWF Player does not sufficiently escape serialized arguments.
return this._swfPlayerNode.myCallback(arg);
}

render() {
// Globally unique ID is required for ExternalInterface callbacks in IE<11.
return (
...
ref={c => this._swfPlayerNode = c}
id={SWF_ID_PREFIX + this._uid}
flashVars={{myCallbackName: SWF_CALL_NAME_PREFIX + this._uid}}
/>
);
}
}
`

ReactSWFCompat

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.

`jsx
container={