React hook to run pyodide in a web worker
npm install use-pyodideA simple React hook to run Python code (using pyodide) in a web worker.
``
npm install use-pyodide
If you're using NextJS, modify your next.config.js file to enable transpiling from Typescript:
`
/* @type {import('next').NextConfig} /
const nextConfig = {
transpilePackages: ["use-pyodide"]
}
(If you'd prefer building some other way,
let me know.)
To initialize pyodide and use it in a React component,
just call the usePyodide hook:
`
import { usePyodide } from "use-pyodide";
const MyComponent = () => {
const { pyodide, loading, error } = usePyodide();
useEffect(() => {
if (pyodide) {
pyodide.runPython(print("👋 from Python"))
}
}, [pyodide]);
...
}
`
The first time usePyodide is called, it will download the Pyodide
wasm bundle from JsDelivr and create a web worker to run it.
Multiple calls are fine, only one singleton instance will be created.
Loading pyodide can take several seconds, so you may want to initialize
it when your app first loads, before it's actually needed in components.
You can optionally do that by calling initializePyodide, like this:
`
import { initializePyodide } from "use-pyodide";
const MyApp = () => {
useEffect(() => {
initializePyodide({ debug: true });
}, []);
}
`
If you call initializePyodide with debug: true, debug messages from
stdout/stderr and elapsed times will be logged to the browser console,
which can be useful during development.
By default, only the Python standard library is loaded.
To load other packages, just pass an array of package names to initializePyodide.
`
initializePyodide({
packages: ["numpy", "pandas"]
})
Many packages have been built for pyodide:
https://pyodide.org/en/stable/usage/packages-in-pyodide.html
In addition to these, pure Python packages typically work.
Packages are installed using micropip.install, as described
here.
Once you have a pyodide object, you can use it to execute Python code
in your browser!
You can optionally pass in global vars to the Python execution namespace.
`
const pythonCode = "...";
const result = await pyodide.runPython(pythonCode, {
args: {
name: "Guido"
}
});
`
You can access these global vars in Python like this:
`
import json
args = args or {}
name = args.get("name")
json.dumps({
"message": f"Hi, {name}"
})
`
As a convenience, if your Python script returns a JSON string as its last expression, you can
use runPythonJson to automatically JSON.parse the result:
`
const jsonObject = await pyodide.runPythonJson(code, globals);
To avoid blocking the main UI thread, we run pyodide in a background web worker
(using comlink), as described here:
https://pyodide.org/en/stable/usage/webworker.html
You can capture output from Python's print statements and error messages using setOutput. Pass a callback function that will be called with each piece of output text:
`
// Simple logging
pyodide.setOutput((text) => {
console.log('Python output:', text);
});
Read more redirecting standard streams in pyodide here:
https://pyodide.org/en/stable/usage/streams.html
If needed, you can access pyodide outside of React components like this:
`
import { getPyodide } from "use-pyodide";
const pyodide: Pyodide = await getPyodide();
``
MIT license.
Feel free to copy/fork code as you like. No need for attribution, but if you
find this library helpful or build something cool with it, let me know!
- 0.1.4: Add setOutput, update dependencies