Skip to content
You can load C or C++ function in React project
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Add C2wasm loader in program Nov 7, 2018
public Update compare Nov 1, 2018
scripts Finish Oct 30, 2018
src Update C fibonacci function Nov 7, 2018
.gitignore Initial project Oct 30, 2018
LICENSE Initial commit Oct 30, 2018
README.md add perfomance Nov 1, 2018
package-lock.json Update package-lock.json Jun 15, 2019
package.json Update package.json Jan 6, 2019
yarn.lock Add C2wasm loader in program Nov 7, 2018

README.md

WebAssembly-In-React

In this project, you can use WebAssembly module in React project.

Usage

git clone https://github.com/detectiveHLH/webassembly-in-react
cd webassembly-in-react
yarn install
yarn start

Then this application will listen on you localhost.Check the console in web site.You will see the result of the function call.

Core Function

getExportFunction = async (url) => {
    const env = {
      memoryBase: 0,
      tableBase: 0,
      memory: new WebAssembly.Memory({
        initial: 256
      }),
      table: new WebAssembly.Table({
        initial: 2,
        element: 'anyfunc'
      })
    };
    const instance = await fetch(url).then((response) => {
      return response.arrayBuffer();
    }).then((bytes) => {
      return WebAssembly.instantiate(bytes, {env: env})
    }).then((instance) => {
      return instance.instance.exports;
    });
    return instance;
};

This function will get the C/C++ function that compiled in wasm file.If you want to use the function inside.Just do this.

const wasmUrl = 'http://localhost:3000/add.wasm';
const { add } = await this.getExportFunction(wasmUrl);

Performance

Once you start this project, you will see two different fibonacci function running result in the home page.One is implemented by Javascript, another is C,Javascript takes twice as long as C.

You can’t perform that action at this time.