{"id":19424044,"url":"https://github.com/swizec/d3blackbox","last_synced_at":"2025-04-24T16:31:21.404Z","repository":{"id":33266529,"uuid":"156128365","full_name":"Swizec/d3blackbox","owner":"Swizec","description":"A simple React wrapper for any D3 code you want","archived":false,"fork":false,"pushed_at":"2023-01-05T00:42:36.000Z","size":1231,"stargazers_count":85,"open_issues_count":31,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-03T07:42:55.292Z","etag":null,"topics":["d3","d3js","hooks","react","reactjs"],"latest_commit_sha":null,"homepage":null,"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/Swizec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-04T21:47:48.000Z","updated_at":"2024-09-26T02:45:00.000Z","dependencies_parsed_at":"2023-01-15T00:15:24.144Z","dependency_job_id":null,"html_url":"https://github.com/Swizec/d3blackbox","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swizec%2Fd3blackbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swizec%2Fd3blackbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swizec%2Fd3blackbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Swizec%2Fd3blackbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Swizec","download_url":"https://codeload.github.com/Swizec/d3blackbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250663544,"owners_count":21467366,"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":["d3","d3js","hooks","react","reactjs"],"created_at":"2024-11-10T13:41:43.476Z","updated_at":"2025-04-24T16:31:20.869Z","avatar_url":"https://github.com/Swizec.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3blackbox\n\n[![npm package][npm-badge]][npm]\n\nTake any D3 example you find in the wild and wrap it in a React component. Great for quick experiments and meeting deadlines. 😛\n\n## Meet your deadline in 2 minutes\n\nCheck out how it works in [a live Codesandbox](https://codesandbox.io/s/9jm82v2lry)\n\n1. Install `d3blackbox` with npm\n\n```\n$ npm install -s d3blackbox\n```\n\n2. Find a D3 example you like\n3. Copy its code, put it in a function\n4. Wrap function in `D3blackbox`\n\n```javascript\nimport React from \"react\";\nimport D3blackbox from \"d3blackbox\";\nimport * as d3 from \"d3\";\n\nconst MyDataviz = D3blackbox(function(anchor, props, state) {\n    const svg = d3.select(anchor.current);\n\n    // the rest of your D3 code\n});\n\nexport default MyDataviz;\n```\n\n5. Render inside an `\u003csvg\u003e\u003c/svg\u003e` element\n6. Enjoy your blackbox D3 component\n\nD3blackbox renders an anchor element and delegates control to your render function. You get an `anchor` ref, the component's `props`, and `state`. Do what you want :)\n\nGreat for meeting deadlines and playing around with other people's code. Not recommended for large scale use due to performance constraints. Your render function runs on every component update and redraws the entire DOM subtree. React's rendering engine can't help you.\n\nThat's why it's called a sandbox.\n\n## What if I don't use D3?\n\nThat's okay. `D3blackbox` lets you delegate control to any rendering library you want. As long as you're okay rendering into a `\u003cg\u003e\u003c/g\u003e` element.\n\nYou can even use this approach to render Vue apps inside your React apps. 🤨\n\n## What if I don't want `\u003cg\u003e`?\n\nThat's okay you weirdo. Use the `component` argument to specify a different component.\n\n```javascript\nrender() {\n    return \u003cMyDataviz component=\"div\" /\u003e\n}\n```\n\n## HOCs are so September, do you have hooks?\n\nYes. Hooks are alpha support and all that, but here's how you can use D3 blackbox as a React hook.\n\n```javascript\nimport { useD3 } from \"d3blackbox\";\n\nfunction renderSomeD3(anchor) {\n    d3.select(anchor);\n\n    // ...\n}\n\nconst MyD3Component = ({ x, y }) =\u003e {\n    const refAnchor = useD3(anchor =\u003e renderSomeD3(anchor));\n\n    return \u003cg ref={refAnchor} transform={`translate(${x}, ${y})`} /\u003e;\n};\n```\n\n## With love ❤️\n\nBuilt with love by Swizec\u003cbr\u003e\nCheers\n\nOnly took me 2 years to get around to opensourcing this 😅\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/npm-package\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswizec%2Fd3blackbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswizec%2Fd3blackbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswizec%2Fd3blackbox/lists"}