Awesome

use-as-bind

React Hook for using as-bind with a WASM source

Install

npm install react as-bind use-as-bind

Basic Usage

import * as React from "react";

import { useAsBind } from "use-as-bind";

const Example = () => {
  const { loaded, instance, error } = useAsBind("path/to/wasm.wasm");
  return (
    <div>
      {loaded && instance.exports.exampleFunction()}
      {error && error.message}
    </div>
  );
};

For convenience a hook creator is included:

import * as React from "react";

import { createAsBindHook } from "use-as-bind";

const useMyWasm = createAsBindHook("path/to/my-wasm.wasm", {
  imports: {
    consoleLog: (message) => {
      console.log(message);
    },
  },
});

const Example = () => {
  const { loaded, instance, error } = useMyWasm();
  return (
    <div>
      {loaded && instance.exports.exampleFunction()}
      {error && error.message}
    </div>
  );
};

API

useAsBind takes two arguments:

useAsBind(source, options)

source - string | WebAssembly.Module | BufferSource | Response | PromiseLike<WebAssembly.Module> - The source of the WebAssembly to be loaded. When a string is passed in it should be a url to a .wasm file which will be fetched and then instantiated. For non-string types check out the as-bind docs for instantiate

options - Object - An object that contains options to be used with as-bind and internally within the hook:

• imports - Object - An object of references to be made available to the loaded WASM file. For more information check out the as-bind docs for importObject

License

MIT © tylervipond

This hook is created using create-react-hook.