react-emulatorjs

react-emulatorjs 🕹️

A thing for playing retro games

what is emulatorjs

Emulatorjs is a js library to configure and run retro games in web version of retroarch with great UI and features like save states, capturing screenshots, configuring controls, etc... Emulatorjs team did the great job to compile retroarch cores. Check out cores list.

what is react-emulatorjs

react-emulatorjs is a easiest way to use emulatorjs in React with full typescript support including all emulatorjs options. Available cores, available options.

⚡ quick start

Install react-emulatorjs

npm install react-emulatorjs

Next we have to provide url to ROM. It can be somewhere in the internet. Or we can upload a local file. Let's create a file handler to make url to our local blob.

Next we have to select core and start the emulator when the rom is ready.

import { ChangeEvent, useState } from "react"
import { EmulatorJS } from "react-emulatorjs"

function App() {
  const [rom, setRom] = useState<string>()

  const onFileSelect = async (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files?.[0]) return
    const file = e.target.files?.[0]
    setRom(URL.createObjectURL(file))
  }

  return (
    <>
      <input type="file" onChange={onFileSelect} />

      {rom && (
        <EmulatorJS
          EJS_core="nes" // emulator core
          EJS_gameUrl={rom} // rom url
        />
      )}
    </>
  )
}

And thats all! Now You can run nes roms in browser.

Checkout codesandbox demo with this code.

📎 using locally installed cores

The most important option is EJS_pathtodata. This path points to emulatorjs's binaries. And the best performance option is keep them close as possible, on Your sever. And it is very easy.

• Just extract data folder from latest emulatorjs release and copy in to project's public folder. For example, if You are using 'vite' data folder should be in /public/data.
• Update prop with new path

  <EmulatorJS
      //...
      EJS_pathtodata="/data"
  />
  

Docs and examples

• npm
• online playground
• online playground: source code
• quick start demo sandbox
• react-emulatorjs: API
• EmulatorJS: available options
• EmulatorJS: available cores