A DuckDB context provider for React.
You can find an example app using vite here, webpack here. and create-react-app here
If you are interested in the implementation, the library code is in lib,
and an example application is in src. To use from source, clone the
project, install the packages, then run the example with npm run dev.
Install from npmjs.
npm install @jetblack/duckdb-reactUse the DuckDB context provider to connect to the database.
Children of the DuckDB component will have access to the database context.
import DuckDB, { useDuckDB } from '@jetblack/duckdb-react'
export default function App() {
return (
<DuckDB>
<HelloWorld />
</DuckDB>
)
}
function HelloWorld() {
// Get the DuckDB context from the hook.
const { db, loading, error } = useDuckDB()
useEffect(() => {
if (loading || !db || error) {
return
}
// Do something with duckdb.
}, [loading, db, error])
return <div>Hello, World!</div>
}The DuckDB component takes the following properties:
bundles:DuckDBBundles|undefined- see the section on bundles below,config:DuckDBConfig|undefined- Optional configuration to apply to the database.logger:Logger|undefined- defaults to the built inConsoleLogger.
The properties returned by useDuckDB are:
db:AsyncDuckDB|undefined- Set to the database when successfully instantiated.progress:InstantiationProgress|undefined- This is updated during the database instantiation.loading:boolean- This is initiallyfalse, becomingtruewhen either thedborerrorproperty is set.error:string | Error | undefined- Set to the error when instantiation has failed.
In order to create the context a wasm "bundle" may be provided. If a bundle is not specified it will be downloaded from the JsDelivr CDN.
If specified the bundle is specific to the development environment. The following gives the bundles defined by the DuckDB documentation.
If no bundle is provided the bundle will be discovered from the JsDelivr CDN.
For vite, create the following.
import DuckDB from '@jetblack/duckdb-react'
import { DuckDBBundles } from '@duckdb/duckdb-wasm'
import duckdbMvpWasm from '@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm?url'
import duckdbMvpWorker from '@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js?url'
import duckdbEHWasm from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm?url'
import duckdbEHWorker from '@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js?url'
const VITE_BUNDLES: DuckDBBundles = {
mvp: {
mainModule: duckdbMvpWasm,
mainWorker: duckdbMvpWorker
},
eh: {
mainModule: duckdbEHWasm,
mainWorker: duckdbEHWorker
}
}
export default function App() {
return (
<DuckDB bundles={VITE_BUNDLES}>
...
</DuckDB>
)
}For webpack, create the following bundle.ts.
import DuckDB from '@jetblack/duckdb-react'
import { DuckDBBundles } from '@duckdb/duckdb-wasm'
import duckdbMvpWasm from '@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm'
import duckdbEHWasm from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm'
const WEBPACK_BUNDLES: DuckDBBundles = {
mvp: {
mainModule: duckdbMvpWasm,
mainWorker: new URL('@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js', import.meta.url).toString(),
},
eh: {
mainModule: duckdbEHWasm,
mainWorker: new URL('@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js', import.meta.url).toString(),
}
}
export default function App() {
return (
<DuckDB bundles={WEBPACK_BUNDLES}>
...
</DuckDB>
)
}