{"id":17030036,"url":"https://github.com/rob-blackbourn/jetblack-duckdb-react","last_synced_at":"2025-04-12T12:12:17.206Z","repository":{"id":221812856,"uuid":"755474770","full_name":"rob-blackbourn/jetblack-duckdb-react","owner":"rob-blackbourn","description":"Utilities for using DuckDB in react","archived":false,"fork":false,"pushed_at":"2024-03-09T07:35:01.000Z","size":88,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-05T01:20:31.199Z","etag":null,"topics":["duckdb","duckdb-wasm","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rob-blackbourn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-10T10:22:05.000Z","updated_at":"2025-02-04T21:59:49.000Z","dependencies_parsed_at":"2024-02-10T10:24:17.059Z","dependency_job_id":"5d22e390-860f-4461-aef8-a61be64ad0ba","html_url":"https://github.com/rob-blackbourn/jetblack-duckdb-react","commit_stats":null,"previous_names":["rob-blackbourn/jetblack-duckdb-react"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-blackbourn%2Fjetblack-duckdb-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-blackbourn%2Fjetblack-duckdb-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-blackbourn%2Fjetblack-duckdb-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-blackbourn%2Fjetblack-duckdb-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rob-blackbourn","download_url":"https://codeload.github.com/rob-blackbourn/jetblack-duckdb-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565078,"owners_count":21125417,"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":["duckdb","duckdb-wasm","react"],"created_at":"2024-10-14T08:03:35.550Z","updated_at":"2025-04-12T12:12:17.186Z","avatar_url":"https://github.com/rob-blackbourn.png","language":"TypeScript","funding_links":[],"categories":["Libraries Powered by DuckDB"],"sub_categories":[],"readme":"# @jetblack/duckdb-react\n\nA DuckDB context provider for React.\n\nYou can find an example app using vite [here](https://github.com/rob-blackbourn/demo-duckdb-react-vite),\nwebpack  [here](https://github.com/rob-blackbourn/demo-duckdb-react-webpack).\nand create-react-app [here](https://github.com/rob-blackbourn/demo-duckdb-react-cra)\n\n## Development\n\nIf you are interested in the implementation, the library code is in [`lib`](./lib),\nand an example application is in [`src`](./src). To use from source, clone the\nproject, install the packages, then run the example with `npm run dev`.\n\n## Installation\n\nInstall from [npmjs](https://www.npmjs.com/package/@jetblack/duckdb-react).\n\n```bash\nnpm install @jetblack/duckdb-react\n```\n\n## Usage\n\nUse the `DuckDB` context provider to connect to the database.\n\nChildren of the `DuckDB` component will have access to the database context.\n\n```typescript\nimport DuckDB, { useDuckDB } from '@jetblack/duckdb-react'\n\nexport default function App() {\n  return (\n    \u003cDuckDB\u003e\n      \u003cHelloWorld /\u003e\n    \u003c/DuckDB\u003e\n  )\n}\n\nfunction HelloWorld() {\n  // Get the DuckDB context from the hook.\n  const { db, loading, error } = useDuckDB()\n\n  useEffect(() =\u003e {\n    if (loading || !db || error) {\n      return\n    }\n\n    // Do something with duckdb.\n\n  }, [loading, db, error])\n\n  return \u003cdiv\u003eHello, World!\u003c/div\u003e\n}\n\n```\n\nThe `DuckDB` component takes the following properties:\n\n* `bundles`: [`DuckDBBundles`](https://shell.duckdb.org/docs/interfaces/index.DuckDBBundles.html) `|` `undefined` - see the section on bundles below,\n* `config`: [`DuckDBConfig`](https://shell.duckdb.org/docs/interfaces/index.DuckDBConfig.html) `|` `undefined` - Optional configuration to apply to the database.\n* `logger`: [`Logger`](https://shell.duckdb.org/docs/interfaces/index.Logger.html) `|` `undefined` - defaults to the built in [`ConsoleLogger`](https://shell.duckdb.org/docs/classes/index.ConsoleLogger.html).\n\nThe properties returned by `useDuckDB` are:\n\n* `db`: [`AsyncDuckDB`](https://shell.duckdb.org/docs/classes/index.AsyncDuckDB.html) `|` `undefined` - Set to the database when successfully instantiated.\n* `progress`: [`InstantiationProgress`](https://shell.duckdb.org/docs/interfaces/index.InstantiationProgress.html) `|` `undefined` - This is updated during the database instantiation.\n* `loading`: `boolean` - This is initially `false`, becoming `true` when either the `db` or `error` property is set.\n* `error`: `string | Error | undefined` - Set to the error when instantiation has failed.\n\n### Bundles\n\nIn order to create the context a wasm \"bundle\" may be provided. If a bundle is\nnot specified it will be downloaded from the JsDelivr CDN.\n\nIf specified the bundle is specific to the development environment. The following\ngives the bundles defined by the [DuckDB documentation](https://duckdb.org/docs/api/wasm/instantiation).\n\n#### No bundle\n\nIf no bundle is provided the bundle will be discovered from the JsDelivr CDN.\n\n#### vite\n\nFor vite, create the following.\n\n```typescript\nimport DuckDB from '@jetblack/duckdb-react'\n\nimport { DuckDBBundles } from '@duckdb/duckdb-wasm'\nimport duckdbMvpWasm from '@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm?url'\nimport duckdbMvpWorker from '@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js?url'\nimport duckdbEHWasm from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm?url'\nimport duckdbEHWorker from '@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js?url'\n\nconst VITE_BUNDLES: DuckDBBundles = {\n  mvp: {\n    mainModule: duckdbMvpWasm,\n    mainWorker: duckdbMvpWorker\n  },\n  eh: {\n    mainModule: duckdbEHWasm,\n    mainWorker: duckdbEHWorker\n  }\n}\n\nexport default function App() {\n  return (\n    \u003cDuckDB bundles={VITE_BUNDLES}\u003e\n      ...\n    \u003c/DuckDB\u003e\n  )\n}\n```\n\n#### webpack\n\nFor webpack, create the following `bundle.ts`.\n\n```typescript bundle.js\nimport DuckDB from '@jetblack/duckdb-react'\n\nimport { DuckDBBundles } from '@duckdb/duckdb-wasm'\nimport duckdbMvpWasm from '@duckdb/duckdb-wasm/dist/duckdb-mvp.wasm'\nimport duckdbEHWasm from '@duckdb/duckdb-wasm/dist/duckdb-eh.wasm'\n\nconst WEBPACK_BUNDLES: DuckDBBundles = {\n  mvp: {\n    mainModule: duckdbMvpWasm,\n    mainWorker: new URL('@duckdb/duckdb-wasm/dist/duckdb-browser-mvp.worker.js', import.meta.url).toString(),\n  },\n  eh: {\n    mainModule: duckdbEHWasm,\n    mainWorker: new URL('@duckdb/duckdb-wasm/dist/duckdb-browser-eh.worker.js', import.meta.url).toString(),\n  }\n}\n\nexport default function App() {\n  return (\n    \u003cDuckDB bundles={WEBPACK_BUNDLES}\u003e\n      ...\n    \u003c/DuckDB\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frob-blackbourn%2Fjetblack-duckdb-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frob-blackbourn%2Fjetblack-duckdb-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frob-blackbourn%2Fjetblack-duckdb-react/lists"}