react-ruffle

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
• Supports onFSCommand callbacks for Flash-to-JavaScript communication
• Click to play animated content

Demo

Storybook Demo

Install

Using NPM:

npm install react-ruffle

Requirements

React 18 or 19.

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>

// ...or, with an FSCommand callback

<Flash
  src="path/to/my.swf"
  onFSCommand={(command, args) => {
    console.log("FSCommand received:", command, args);
    return true;
  }}
/>

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.onFSCommand

A callback invoked when Flash content calls the FSCommand function. Receives command (string) and args (string) parameters and should return a boolean.

This enables Flash-to-JavaScript communication. See the Ruffle player API docs for details.

Optional Type: (command: string, args: string) => boolean

props.children

Fallback content to display while the Flash media is loading.

Optional Type: ReactNode

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

Breaking Changes in v2

Version 2.0.0 introduces the following breaking changes:

• The component now renders a <div> container instead of an <object> element. Any props previously passed to <object> (e.g. data, HTML object attributes) are no longer supported; use props.src and props.config instead.
• The component now uses the Ruffle JS API (window.RufflePlayer.newest()) to create and manage the player instance directly, rather than relying on Ruffle's automatic embed detection via <object> tags.
• Peer dependency updated to react >= 18 (supports React 18 and 19).

License

MIT © Lacy Morrow