react-ruffle

Render Flash media in React

A React component for rendering Flash & ActionScript content using the Rust-based ruffle emulator.

Ruffle is a Flash Player emulator built in the Rust programming language.

Read the Ruffle documentation for more information.

Features

• Renders Flash content in React
• Uses the Ruffle emulator
• Supports ActionScript and Flash media
• Click to play animated content

Demo

Storybook Demo

Install

Using NPM:

npm install react-ruffle

Usage

import { Flash } from "react-ruffle";

// ...

<Flash src="path/to/my.swf" />

// ...or, with configuration and fallback content

<Flash src="path/to/my.swf" config={{
    // Ruffle configuration options
    autoplay: "off",
    parameters: {
        // Parameters to pass to the Flash content
        // AKA: FlashVars
    }
}}>
  <p>This content will be displayed if the Flash content cannot be rendered.</p>
</Flash>

Note: Both <Flash /> and <Ruffle /> components are exported. They are identical.

API

props.src

The path to the Flash media file.

Required
Type: string

props.config

Ruffle configuration options.

These options are passed directly to the ruffle player. The full list of options are listed in the Ruffle API documentation.

Read the ruffle documentation for more information.

Optional
Type: Object

props.children

The fallback content to display if the Flash media cannot be rendered.

Optional Type: ReactNode

All other props are passed directly to the root <object> element returned by this library.

License

MIT © Lacy Morrow