{"id":18462695,"url":"https://github.com/extism/react","last_synced_at":"2025-04-08T07:32:23.607Z","repository":{"id":209782017,"uuid":"721659935","full_name":"extism/react","owner":"extism","description":"Extism goodies for React developers","archived":false,"fork":false,"pushed_at":"2024-01-24T16:45:29.000Z","size":233,"stargazers_count":10,"open_issues_count":6,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-23T08:42:00.139Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@extism/react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/extism.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-21T14:11:31.000Z","updated_at":"2024-10-16T12:14:23.000Z","dependencies_parsed_at":"2023-12-06T01:25:20.609Z","dependency_job_id":"a0fa4ebf-3f94-467b-bdd4-4d8138dce996","html_url":"https://github.com/extism/react","commit_stats":null,"previous_names":["extism/react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extism%2Freact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extism%2Freact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extism%2Freact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extism%2Freact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/extism","download_url":"https://codeload.github.com/extism/react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247796300,"owners_count":20997547,"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":[],"created_at":"2024-11-06T09:04:05.961Z","updated_at":"2025-04-08T07:32:23.229Z","avatar_url":"https://github.com/extism.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Utilities for Extism\n\nThis repository contains hooks as well as a React component to make it easy for React developers to integrate [Extism](https://extism.org/) into their applications. The implementation of these utilities is based off of the [Universal JavaScript SDK](https://github.com/extism/js-sdk). In some cases, you may be better off using that.\n\n## Installation\n\n```sh\nnpm install @extism/react\n```\n\n## Hooks\n\n### usePlugin\n\nThe `usePlugin` hook is the primary export of this library. It allows developers to easily initialize and execute Extism plugins.\n\n```js\nimport { usePlugin } from '@extism/react'\n\n// ...\n\nfunction MyFunctionalComponent() {\n  const { plugin, loading: pluginLoading, useFunction } = usePlugin(pluginSource, { useWasi: true })\n  const input = 'some input'\n  useEffect(() =\u003e {\n    plugin?.call('count_vowels', input).then((output) =\u003e {\n      // do stuff with output\n    })\n  }, [plugin, input])\n  return (\n    // ...\n  )\n}\n```\nCheck out the [source](https://github.com/extism/react/blob/f8f6c32f70c45dbe68484169debdf285e3fcd44d/src/index.tsx#L40-L59)\n\nCheck out the [examples](https://github.com/extism/react/blob/main/example/src/App.js) for exact usage\n\n### useFunction\n\nThe `useFunction` hook is returned from `usePlugin` and serves as a convenience hook to allow developers to more tersely invoke Extism functions.\n\n```js\nimport { usePlugin } from '@extism/react'\n\n// ...\n\nfunction MyFunctionalComponent() {\n  const { plugin, loading: pluginLoading, useFunction } = usePlugin(pluginSource, { useWasi: true })\n  const input = 'some input'\n  const { output, loading } = useFunction('count_vowels', hookInput);\n  // do stuff with output\n  return (\n    // ...\n  )\n}\n```\nCheck out the [source](https://github.com/extism/react/blob/f8f6c32f70c45dbe68484169debdf285e3fcd44d/src/index.tsx#L61-L76)\n\nCheck out the [examples](https://github.com/extism/react/blob/main/example/src/App.js) for exact usage\n\n## Component\n\n### ExtismPlugin\n\nThe `ExtismPlugin` component is currently the only React component exposed by this library. It allows developers to initialize Extism plugins using JSX and specify which plugin function should be called. When rendered without any children, the output of the plugin function is decoded as text and rendered as HTML. When rendered with children, the output of the plugin function is passed as an argument to the children to allow the developer more flexibility.\n\n```js\nimport { ExtismPlugin } from '@extism/react'\n\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cExtismPlugin source='https://location_of_extism_plugin.wasm' input={someInput} functionName='some_function_name' /\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n\nCheck out the [source](https://github.com/extism/react/blob/f8f6c32f70c45dbe68484169debdf285e3fcd44d/src/index.tsx#L104-L130)\n\nCheck out the [examples](https://github.com/extism/react/blob/main/example/src/App.js) for exact usage\n\n# Examples\n\nAn example application was created using `npx create-react-app example` and can be found in the root of this repository. The `App.js` component contains an example usage of the `usePlugin` hook, and the `ExtismPlugin` component. Check out the comments in the code for how to use the `useFunction` hook, and rendering `ExtismPlugin` with children.  You may start the application by running `npm start` in the example directory (after running `npm i`)\n\n# Questions?\n\nFile an issue or reach out to us on [Discord](https://extism.org/discord)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fextism%2Freact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fextism%2Freact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fextism%2Freact/lists"}