{"id":13821796,"url":"https://github.com/mbasso/react-wasm","last_synced_at":"2025-04-04T14:04:35.857Z","repository":{"id":45706626,"uuid":"166652268","full_name":"mbasso/react-wasm","owner":"mbasso","description":"Declarative WebAssembly instantiation for React","archived":false,"fork":false,"pushed_at":"2022-12-09T10:55:36.000Z","size":1838,"stargazers_count":454,"open_issues_count":16,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T13:05:51.921Z","etag":null,"topics":["high-order-component","hoc","react","render-props","wasm","webassembly"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mbasso.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-20T11:12:12.000Z","updated_at":"2025-03-06T20:56:37.000Z","dependencies_parsed_at":"2023-01-25T16:00:10.747Z","dependency_job_id":null,"html_url":"https://github.com/mbasso/react-wasm","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-wasm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-wasm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-wasm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mbasso%2Freact-wasm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mbasso","download_url":"https://codeload.github.com/mbasso/react-wasm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247187276,"owners_count":20898289,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["high-order-component","hoc","react","render-props","wasm","webassembly"],"created_at":"2024-08-04T08:01:28.735Z","updated_at":"2025-04-04T14:04:35.833Z","avatar_url":"https://github.com/mbasso.png","language":"JavaScript","funding_links":["https://paypal.me/BassoMatteo"],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-wasm\n\n[![Build Status](https://travis-ci.org/mbasso/react-wasm.svg?branch=master)](https://travis-ci.org/mbasso/react-wasm)\n[![npm version](https://img.shields.io/npm/v/react-wasm.svg)](https://www.npmjs.com/package/react-wasm)\n[![npm downloads](https://img.shields.io/npm/dm/react-wasm.svg?maxAge=2592000)](https://www.npmjs.com/package/react-wasm)\n[![Coverage Status](https://coveralls.io/repos/github/mbasso/react-wasm/badge.svg?branch=master)](https://coveralls.io/github/mbasso/react-wasm?branch=master)\n[![MIT](https://img.shields.io/npm/l/react-wasm.svg)](https://github.com/mbasso/react-wasm/blob/master/LICENSE.md)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/BassoMatteo)\n\n\u003e Declarative WebAssembly instantiation for React\n\n## Installation\n\nYou can install react-wasm using [npm](https://www.npmjs.com/package/react-wasm):\n\n```bash\nnpm install --save react-wasm\n```\n\nIf you aren't using npm in your project, you can include reactWasm using UMD build in the dist folder with `\u003cscript\u003e` tag.\n\n## Usage\n\n### Render props\n\nOnce you have installed react-wasm, supposing a CommonJS environment, you can import and use it in this way:\n\n```js\nimport Wasm from \"react-wasm\";\n\n// supposing an \"add.wasm\" module that exports a single function \"add\"\nconst ExampleComponent = () =\u003e (\n  \u003cWasm url=\"/add.wasm\"\u003e\n    {({ loading, error, data }) =\u003e {\n      if (loading) return \"Loading...\";\n      if (error) return \"An error has occurred\";\n\n      const { module, instance } = data;\n      return \u003cdiv\u003e1 + 2 = {instance.exports.add(1, 2)}\u003c/div\u003e;\n    }}\n  \u003c/Wasm\u003e\n);\n```\n\n### Hooks\n\nSince `react-wasm` uses the latest version of React, a `useWasm` hook is available:\n\n```js\nimport { useWasm } from \"react-wasm\";\n\n// supposing an \"add.wasm\" module that exports a single function \"add\"\nconst ExampleComponent = () =\u003e {\n  const {\n    loading,\n    error,\n    data\n  } = useWasm({\n    url: '/add.wasm'\n  });\n\n  if (loading) return \"Loading...\";\n  if (error) return \"An error has occurred\";\n\n  const { module, instance } = data;\n  return \u003cdiv\u003e1 + 2 = {instance.exports.add(1, 2)}\u003c/div\u003e;\n};\n```\n\n### Higher Order Component\n\nIt's also possible to use the library using the HoC approach by importing the named `withWasm` function:\n\n```js\nimport { withWasm } from \"react-wasm\";\n\n// supposing an \"add.wasm\" module that exports a single function \"add\"\nconst ExampleComponent = ({ loading, error, data }) =\u003e {\n  if (loading) return \"Loading...\";\n  if (error) return \"An error has occurred\";\n\n  const { module, instance } = data;\n  return \u003cdiv\u003e1 + 2 = {instance.exports.add(1, 2)}\u003c/div\u003e;\n};\n\n// with a config object\nconst withAdd = withWasm({ url: \"/add.wasm \" });\nconst EnhancedExample = withAdd(ExampleComponent);\n\nconst App = () =\u003e \u003cEnhancedExample /\u003e;\n\n// with the \"url\" prop\nconst EnhancedExample = withWasm()(ExampleComponent);\n\nconst App = () =\u003e \u003cEnhancedExample url=\"/add.wasm\" /\u003e;\n```\n\nThe second argument of the `withWasm` function is a props mapper. If you want to customize the information your child\ncomponent will receive from the underlying `Wasm` component, you can do:\n\n```javascript\nconst mapToChild = ({ loading, error, data }) =\u003e ({\n  hasLoaded: !loading,\n  hasError: !!error,\n  add: data \u0026\u0026 data.instance.add\n});\n\nconst withAdd = withWasm({ url: \"/add.wasm \" }, mapToChild);\nconst EnhancedExample = withAdd(ExampleComponent);\n\nconst App = () =\u003e \u003cEnhancedExample /\u003e;\n```\n\n## API\n\n```js\ntype WasmConfig = {\n  // you can instantiate modules using a URL\n  // or directly a BufferSource (TypedArray or ArrayBuffer)\n  url?: string,\n  bufferSource?: BufferSource,\n  // An optional object containing the values to be imported into the newly-created Instance\n  // such as functions or WebAssembly.Memory objects.\n  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Syntax\n  importObject?: {},\n};\n\ntype WasmResult = {\n  loading: boolean,\n  error: ?Error,\n  data: ?{\n    module: WebAssembly.Module,\n    instance: WebAssembly.Instance\n  }\n};\n\ntype WasmProps = {\n  ...$Exact\u003cWasmConfig\u003e,\n  children: (renderProps: WasmResult) =\u003e React.Node\n};\n\nwithWasm(\n  config?: WasmConfig,\n  mapProps?: ({ loading, error, data }: WasmResult) =\u003e Props\n): (Component: React.ComponentType) =\u003e React.ComponentType\n\nuseWasm(config?: WasmConfig): WasmResult;\n```\n\n## Browser support\n\n`react-wasm` uses [fetch](https://developer.mozilla.org/it/docs/Web/API/Fetch_API) and obviously [WebAssembly](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) APIs, they are broadly supported by major browser engines but you would like to polyfill them to support old versions.\n\n```js\nif (!window.fetch || !window.WebAssembly) {\n    ...\n} else {\n    ...\n}\n```\n\n## Change Log\n\nThis project adheres to [Semantic Versioning](http://semver.org/).  \nEvery release, along with the migration instructions, is documented on the Github [Releases](https://github.com/mbasso/react-wasm/releases) page.\n\n## Authors\n\n**Matteo Basso**\n\n- [github/mbasso](https://github.com/mbasso)\n- [@teo_basso](https://twitter.com/teo_basso)\n\n## Copyright and License\n\nCopyright (c) 2019, Matteo Basso.\n\nreact-wasm source code is licensed under the [MIT License](https://github.com/mbasso/react-wasm/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Freact-wasm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmbasso%2Freact-wasm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmbasso%2Freact-wasm/lists"}