├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── README.md
├── demo
    └── src
    │   ├── .babelrc
    │   ├── Barchart.js
    │   ├── Recaman.js
    │   ├── images
    │       └── BBLogo.png
    │   ├── index.js
    │   ├── prism.css
    │   ├── socialShare.js
    │   └── style.css
├── nwb.config.js
├── package-lock.json
├── package.json
├── src
    ├── index.ts
    └── types.d.ts
├── tests
    ├── .eslintrc
    └── index-test.js
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | /coverage
 2 | /demo/dist
 3 | /es
 4 | /lib
 5 | /node_modules
 6 | /umd
 7 | npm-debug.log*
 8 | src/index.js
 9 | src/index.js.map
10 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | 
 3 | language: node_js
 4 | node_js:
 5 |   - 8
 6 | 
 7 | before_install:
 8 |   - npm install codecov.io coveralls
 9 | 
10 | after_success:
11 |   - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
12 |   - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
13 | 
14 | branches:
15 |   only:
16 |     - master
17 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Prerequisites
 2 | 
 3 | [Node.js](http://nodejs.org/) >= v4 must be installed.
 4 | 
 5 | ## Installation
 6 | 
 7 | - Running `npm install` in the component's root directory will install everything you need for development.
 8 | 
 9 | ## Demo Development Server
10 | 
11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
12 | 
13 | ## Running Tests
14 | 
15 | - `npm test` will run the tests once.
16 | 
17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
18 | 
19 | - `npm run test:watch` will run the tests on every change.
20 | 
21 | ## Building
22 | 
23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app.
24 | 
25 | - `npm run clean` will delete built resources.
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # d3blackbox
 2 | 
 3 | [![npm package][npm-badge]][npm]
 4 | 
 5 | Take any D3 example you find in the wild and wrap it in a React component. Great for quick experiments and meeting deadlines. 😛
 6 | 
 7 | ## Meet your deadline in 2 minutes
 8 | 
 9 | Check out how it works in [a live Codesandbox](https://codesandbox.io/s/9jm82v2lry)
10 | 
11 | 1. Install `d3blackbox` with npm
12 | 
13 | ```
14 | $ npm install -s d3blackbox
15 | ```
16 | 
17 | 2. Find a D3 example you like
18 | 3. Copy its code, put it in a function
19 | 4. Wrap function in `D3blackbox`
20 | 
21 | ```javascript
22 | import React from "react";
23 | import D3blackbox from "d3blackbox";
24 | import * as d3 from "d3";
25 | 
26 | const MyDataviz = D3blackbox(function(anchor, props, state) {
27 |     const svg = d3.select(anchor.current);
28 | 
29 |     // the rest of your D3 code
30 | });
31 | 
32 | export default MyDataviz;
33 | ```
34 | 
35 | 5. Render inside an `<svg></svg>` element
36 | 6. Enjoy your blackbox D3 component
37 | 
38 | D3blackbox 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 :)
39 | 
40 | Great 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.
41 | 
42 | That's why it's called a sandbox.
43 | 
44 | ## What if I don't use D3?
45 | 
46 | That's okay. `D3blackbox` lets you delegate control to any rendering library you want. As long as you're okay rendering into a `<g></g>` element.
47 | 
48 | You can even use this approach to render Vue apps inside your React apps. 🤨
49 | 
50 | ## What if I don't want `<g>`?
51 | 
52 | That's okay you weirdo. Use the `component` argument to specify a different component.
53 | 
54 | ```javascript
55 | render() {
56 |     return <MyDataviz component="div" />
57 | }
58 | ```
59 | 
60 | ## HOCs are so September, do you have hooks?
61 | 
62 | Yes. Hooks are alpha support and all that, but here's how you can use D3 blackbox as a React hook.
63 | 
64 | ```javascript
65 | import { useD3 } from "d3blackbox";
66 | 
67 | function renderSomeD3(anchor) {
68 |     d3.select(anchor);
69 | 
70 |     // ...
71 | }
72 | 
73 | const MyD3Component = ({ x, y }) => {
74 |     const refAnchor = useD3(anchor => renderSomeD3(anchor));
75 | 
76 |     return <g ref={refAnchor} transform={`translate(${x}, ${y})`} />;
77 | };
78 | ```
79 | 
80 | ## With love ❤️
81 | 
82 | Built with love by Swizec<br>
83 | Cheers
84 | 
85 | Only took me 2 years to get around to opensourcing this 😅
86 | 
87 | [npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
88 | [npm]: https://www.npmjs.org/package/npm-package
89 | 


--------------------------------------------------------------------------------
/demo/src/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "plugins": [
 3 |         [
 4 |             "prismjs",
 5 |             {
 6 |                 "languages": [
 7 |                     "javascript",
 8 |                     "css",
 9 |                     "markup"
10 |                 ],
11 |                 "plugins": [
12 |                     "line-numbers"
13 |                 ],
14 |                 "theme": "solarized-light",
15 |                 "css": true
16 |             }
17 |         ]
18 |     ]
19 | }


--------------------------------------------------------------------------------
/demo/src/Barchart.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import D3blackbox from "../../src";
 3 | import * as d3 from "d3";
 4 | 
 5 | const Barchart = D3blackbox(function(anchor, props) {
 6 |     var svg = d3.select(anchor.current),
 7 |         margin = { top: 20, right: 20, bottom: 30, left: 40 },
 8 |         width = +props.width - margin.left - margin.right,
 9 |         height = +props.height - margin.top - margin.bottom;
10 | 
11 |     var x = d3
12 |             .scaleBand()
13 |             .rangeRound([0, width])
14 |             .padding(0.1),
15 |         y = d3.scaleLinear().rangeRound([height, 0]);
16 | 
17 |     var g = svg
18 |         .append("g")
19 |         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
20 | 
21 |     d3.tsv(
22 |         "https://cdn.rawgit.com/mbostock/3885304/raw/a91f37f5f4b43269df3dbabcda0090310c05285d/data.tsv",
23 |         function(d) {
24 |             d.frequency = +d.frequency;
25 |             return d;
26 |         }
27 |     ).then(function(data) {
28 |         x.domain(
29 |             data.map(function(d) {
30 |                 return d.letter;
31 |             })
32 |         );
33 |         y.domain([
34 |             0,
35 |             d3.max(data, function(d) {
36 |                 return d.frequency;
37 |             })
38 |         ]);
39 | 
40 |         g.append("g")
41 |             .attr("class", "axis axis--x")
42 |             .attr("transform", "translate(0," + height + ")")
43 |             .call(d3.axisBottom(x));
44 | 
45 |         g.append("g")
46 |             .attr("class", "axis axis--y")
47 |             .call(d3.axisLeft(y).ticks(10, "%"))
48 |             .append("text")
49 |             .attr("transform", "rotate(-90)")
50 |             .attr("y", 6)
51 |             .attr("dy", "0.71em")
52 |             .attr("text-anchor", "end")
53 |             .text("Frequency");
54 | 
55 |         g.selectAll(".bar")
56 |             .data(data)
57 |             .enter()
58 |             .append("rect")
59 |             .attr("class", "bar")
60 |             .attr("x", function(d) {
61 |                 return x(d.letter);
62 |             })
63 |             .attr("y", function(d) {
64 |                 return y(d.frequency);
65 |             })
66 |             .attr("width", x.bandwidth())
67 |             .attr("height", function(d) {
68 |                 return height - y(d.frequency);
69 |             });
70 |     });
71 | });
72 | 
73 | export default Barchart;
74 | 


--------------------------------------------------------------------------------
/demo/src/Recaman.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import * as d3 from "d3";
  3 | 
  4 | import { useD3 } from "../../src";
  5 | 
  6 | // Recaman sequence animation borrowed from http://blockbuilder.org/johnwalley/25b77d49bbbee7aef480d7598708e039
  7 | 
  8 | function recaman(svg, width, height) {
  9 |     var n = 60;
 10 | 
 11 |     var curr = 0;
 12 |     var seq = [curr];
 13 | 
 14 |     for (var i = 1; i < n; i++) {
 15 |         var next = curr - i;
 16 | 
 17 |         if (next < 0 || seq.includes(next)) {
 18 |             curr = curr + i;
 19 |             seq.push(curr);
 20 |         } else {
 21 |             curr = next;
 22 |             seq.push(next);
 23 |         }
 24 |     }
 25 | 
 26 |     console.log(seq);
 27 | 
 28 |     var data = [];
 29 |     var sign = 1;
 30 | 
 31 |     for (var i = 0; i < n - 1; i++) {
 32 |         var center = (seq[i] + seq[i + 1]) / 2;
 33 |         var radius = Math.abs(seq[i] - seq[i + 1]) / 2;
 34 |         var dir = Math.sign(seq[i + 1] - seq[i]);
 35 |         data.push({ center: center, radius: radius, sign: sign, dir: dir });
 36 |         sign = -sign;
 37 |     }
 38 | 
 39 |     console.log(data);
 40 | 
 41 |     var g = d3.select(svg).append("g");
 42 | 
 43 |     var x = d3
 44 |         .scaleLinear()
 45 |         .range([0, width])
 46 |         .domain([0, d3.max(seq)]);
 47 | 
 48 |     var arc = d3
 49 |         .arc()
 50 |         .innerRadius(function(d) {
 51 |             return x(d.radius);
 52 |         })
 53 |         .outerRadius(function(d) {
 54 |             return x(d.radius);
 55 |         })
 56 |         .endAngle(function(d) {
 57 |             return (
 58 |                 d.dir * d.sign * (Math.PI / 2) + ((d.sign - 1) * Math.PI) / 2
 59 |             );
 60 |         })
 61 |         .startAngle(function(d) {
 62 |             return (
 63 |                 -d.dir * d.sign * (Math.PI / 2) + ((d.sign - 1) * Math.PI) / 2
 64 |             );
 65 |         });
 66 | 
 67 |     var DURATION = 300;
 68 | 
 69 |     g.selectAll("path")
 70 |         .data(data)
 71 |         .enter()
 72 |         .append("path")
 73 |         .attr("stroke", "steelblue")
 74 |         .attr("stroke-width", "2")
 75 |         .attr("d", arc)
 76 |         .attr("transform", function(d) {
 77 |             return "translate(" + x(d.center) + ",240)";
 78 |         })
 79 |         .attr("stroke-dasharray", function(d) {
 80 |             return this.getTotalLength() + ", " + this.getTotalLength();
 81 |         })
 82 |         .attr("stroke-dashoffset", function(d) {
 83 |             return this.getTotalLength();
 84 |         })
 85 |         .transition()
 86 |         .delay(function(d, i) {
 87 |             return i * DURATION;
 88 |         })
 89 |         .duration(DURATION * 2)
 90 |         .ease(d3.easeLinear)
 91 |         .attr("stroke-dashoffset", 0);
 92 | }
 93 | 
 94 | const Recaman = ({ x, y, width, height }) => {
 95 |     const refAnchor = useD3(anchor => recaman(anchor, width, height));
 96 | 
 97 |     return <g ref={refAnchor} transform={`translate(${x}, ${y})`} />;
 98 | };
 99 | 
100 | export default Recaman;
101 | 


--------------------------------------------------------------------------------
/demo/src/images/BBLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Swizec/d3blackbox/d11ac5611f9fe7f8419a800727d9658122125d7d/demo/src/images/BBLogo.png


--------------------------------------------------------------------------------
/demo/src/index.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import { render } from "react-dom";
  3 | import SocialShare from './socialShare'
  4 | import Barchart from "./Barchart";
  5 | import Recaman from "./Recaman";
  6 | import styled from 'styled-components';
  7 | import Logo from './images/BBLogo.png'
  8 | import "./style.css";
  9 | import Prism from 'prismjs';
 10 | import "./prism.css";
 11 | 
 12 | 
 13 | const Wrapper = styled.div`
 14 | margin: 0;
 15 | padding: 0;
 16 | color: #2B2B2B;
 17 | @keyframes HeroAnimation {
 18 |   0% {
 19 |     opacity: 0;
 20 |     transform: translateY(20px);
 21 |   }
 22 |   100% {
 23 |     opacity: 3;
 24 |     transform: translateY(0);
 25 |   }
 26 | }
 27 | .social {
 28 |     text-align: center;
 29 |     margin: 0 0 5rem;
 30 | }
 31 | `
 32 | const WrapperHero = styled.div`
 33 | background-color: #ffc600;
 34 | background-image: linear-gradient(45deg, #ffc600 17%, #faef5e 75%);
 35 | text-align: center;
 36 | height: 100%;
 37 | margin: 0;
 38 | padding: 6rem 0;
 39 | color: #2B2B2B;
 40 | img {
 41 |     animation: HeroAnimation;
 42 |     animation-duration: 6s;
 43 |     animation-fill-mode: forwards;
 44 |     animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
 45 | }
 46 | h1 {
 47 |     color: #2B2B2B;
 48 |     margin: 0rem 0 5rem;
 49 |     font-weight: 900;
 50 |     font-size: 70px;
 51 |     animation: HeroAnimation;
 52 |     animation-duration: 4s;
 53 |     animation-fill-mode: forwards;
 54 |     animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
 55 | }
 56 | p {
 57 |     margin: 0rem auto 3rem;
 58 |     padding: 0 1rem;
 59 |     max-width: 800px;
 60 |     font-weight: 400;
 61 |     font-size: 28px;
 62 |     animation: HeroAnimation;
 63 |     animation-duration: 4s;
 64 |     animation-fill-mode: forwards;
 65 |     animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
 66 | }
 67 | strong { 
 68 |     font-weight: 900;
 69 | }
 70 | a {
 71 |     color: #fff;
 72 |     background-color: #DE541E;
 73 |     font-weight: 900;
 74 |     padding: .8rem 2.4rem;
 75 |     transition: 1s cubic-bezier(0.2, 0.8, 0.2, 1);
 76 | }
 77 | a:hover {
 78 |     background-color: #2B2B2B;
 79 |     color: #fff;
 80 |     border: none;
 81 |     box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
 82 |     transform: translateY(-9px);
 83 | }
 84 | @media (max-width: 940px) {
 85 |     h1 {
 86 |         font-size: 40px;
 87 |     }
 88 |     p{
 89 |         font-size: 20px;
 90 |     }
 91 | }
 92 | `
 93 | 
 94 | const WrapperUsage = styled.div`
 95 | margin: 5rem auto;
 96 | max-width: 800px;
 97 | padding: 0 1.5rem;
 98 | `
 99 | const WrapperGetStart = styled.div`
100 | margin: 5rem auto;
101 | max-width: 800px;
102 | padding: 0 1.5rem;
103 | `
104 | const WrapperHooks = styled.div`
105 | margin: 5rem auto;
106 | max-width: 800px;
107 | padding: 0 1.5rem;
108 | svg {
109 |         width: 800;
110 |         height: 400;
111 |     }
112 | `
113 | const WrapperAnchor = styled.div`
114 | margin: 5rem auto;
115 | max-width: 800px;
116 | padding: 0 1.5rem;
117 | `
118 | const WrapperFooter = styled.div`
119 | background-color: #2B2B2B;
120 | text-align: center;
121 | height: 100%;
122 | padding: 1rem 0;
123 | color: #fff;
124 | display: grid;
125 | align-items: center;
126 | justify-items: center;
127 | grid-template-columns: 1fr 1fr 1fr;
128 | grid-template-areas:
129 | "BU WL YS";
130 | @media (max-width: 940px) {
131 |     grid-template-columns: 1fr;
132 |     grid-template-areas:
133 | "BU"
134 | "WL"
135 | "YS";
136 | }
137 | h2 {
138 |     grid-area: WL;
139 | }
140 | .Built {
141 |     grid-area: BU;
142 | }
143 | .Years {
144 |     grid-area: YS;
145 |     font-size: 14px;
146 | }
147 | p {
148 |     font-size: 18px;
149 | }
150 | `
151 | 
152 | class Demo extends Component {
153 |     componentDidMount() {
154 |         Prism.highlightAll();
155 |       }
156 |     render() {
157 |         return (
158 |             <Wrapper>
159 |                 <WrapperHero>
160 |                     <h1>D3 BLACKBOX</h1>
161 |                     <img src={Logo} height='300px' alt='hero'/>
162 |                     <p>
163 |                         Take any <strong>D3 </strong>example you find in the wild and wrap it in a
164 |                         React component. Great for quick experiments and meeting
165 |                         deadlines. 😛
166 |                     </p>
167 |                     <a href="https://github.com/Swizec/d3blackbox">Source code on GitHub
168 |                     </a>
169 |                 </WrapperHero>
170 | 
171 |                 <WrapperUsage>
172 |                     <h1>Basic usage</h1>
173 | 
174 |                     <p>
175 |                         A{" "}
176 |                         <a href="https://cdn.rawgit.com/mbostock/3885304/raw/a91f37f5f4b43269df3dbabcda0090310c05285d/index.html">
177 |                             barchart from D3
178 |                         </a>{" "}
179 |                         docs wrapped in a React component. Takes 2 minutes to do
180 |                         from scratch with any code you find. 👇
181 |                     </p>
182 |                     <div class="iframe-container">
183 |                     <iframe
184 |                         src="https://codesandbox.io/embed/km3l21y60r"
185 |                         style={{
186 |                             width: 800,
187 |                             height: 500,
188 |                             border: 0,
189 |                             borderRadius: 4,
190 |                             overflow: "hidden",
191 |                         }}
192 |                         sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
193 |                     />
194 |                     </div>
195 |                     <svg width="250" height="250" >
196 |                         <Barchart x={10} y={10} width={250} height={200} />
197 |                     </svg>
198 |                 </WrapperUsage>
199 |                 <WrapperGetStart>
200 |                     <h1>Getting Started</h1>
201 |                     <h3>
202 |                         1. Install 
203 |                         <pre>
204 |                         <code className="language-javascript">{'d3blackbox'}</code> and <code className="language-javascript">{'d3'}</code>
205 |                         </pre>
206 |                     </h3>
207 |                     <p>
208 |                         <pre>
209 |                         <code className="language-javascript">{'$ npm install d3blackbox'}</code>
210 |                         </pre>
211 |                     </p>
212 |                     <h3>
213 |                         2. Wrap D3 code in <code className="language-javascript">{'D3blackbox'}</code>
214 |                     </h3>
215 |                     <pre>
216 |                     <code className="language-javascript">
217 | {`
218 | import React from "react";
219 | import D3blackbox from "d3blackbox";
220 | import * as d3 from "d3";
221 | const Barchart = D3blackbox(function(anchor, props, state) {
222 |     const svg = d3.select(anchor.current);
223 |     // the rest of your D3 code
224 | });
225 | export default Barchart;`}
226 |                     </code>
227 |                     </pre>
228 |                     <h3>3. Render your component</h3>
229 |                     <p>
230 |                         <pre>
231 |                         <code className="language-javascript">{`
232 |     <Barchart x={10} y={10} width={300} height={200} />
233 |                         `}</code>
234 |                         </pre>
235 |                     </p>
236 |                     <p>
237 |                         <svg width="250" height="250">
238 |                             <Barchart x={10} y={10} width={250} height={200} />
239 |                         </svg>
240 |                     </p>
241 | 
242 |                     <h1>Codesandbox</h1>
243 | 
244 |                     <p>
245 |                         Here's a Codesandbox example, if you prefer to play around.
246 |                     </p>
247 |                     <div class="iframe-container">
248 |                     <iframe
249 |                         src="https://codesandbox.io/embed/9jm82v2lry"
250 |                         style={{
251 |                             width: 800,
252 |                             height: 500,
253 |                             border: 0,
254 |                             borderRadius: 4,
255 |                             overflow: "hidden"
256 |                         }}
257 |                         sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
258 |                     />
259 |                     </div>
260 |                 </WrapperGetStart>
261 |                 <WrapperAnchor>
262 |                     <h1>Use different anchor component</h1>
263 |                     <p>
264 |                         By default D3blackbox wraps your D3 render method in a
265 |                         &lt;g&gt; element. You can change that with the{" "}
266 |                         <code>component</code> prop.
267 |                     </p>
268 |                     <pre>
269 |                     <code className="language-javascript">{`
270 |     <Barchart component="div" />
271 |                         `}</code>
272 |                         </pre>
273 |                     <p>Make sure your renderer knows how to handle that.</p>
274 |                     <p/>
275 |                 </WrapperAnchor>
276 |                 <WrapperHooks>
277 |                     <h1>Use with React hooks</h1>
278 |                     <p>
279 |                         React Hooks are still in alpha, but I know you're gonna ask.
280 |                         Yes, there's a hooks version <code>useD3</code>.
281 |                     </p>
282 |                     <p>
283 |                         <svg width="350" height="300" viewBox="0 0 760 500"
284 |   preserveAspectRatio="xMidYMid meet">
285 |                             <Recaman x={150} y={150} width={350} height={300} />
286 |                         </svg>
287 |                     </p>
288 |                     <pre>
289 |                 <code className="language-javascript">
290 |                 {`
291 | import { useD3 } from "d3blackbox";
292 | function renderSomeD3(anchor) {
293 |     d3.select(anchor);
294 |     // ...
295 | }
296 | const MyD3Component = ({ x, y }) => {
297 |     const refAnchor = useD3(anchor => renderSomeD3(anchor));
298 |     return <g ref={refAnchor} transform={\`translate(\${x}, \${y})\`} />;
299 | };
300 |                 `}</code>
301 |                 </pre>
302 |                     <p>
303 |                         Think of that <code className="language-javascript">{'renderSomeD3'}</code> call as a render
304 |                         prop. Use it to pass any props into your D3 render function
305 |                         as
306 |                     </p>
307 |                 </WrapperHooks>
308 |                 <div className='social'>
309 |                     <h1>Share!</h1>
310 |                     <SocialShare/>
311 |                 </div>
312 |                 <WrapperFooter>
313 |                     <h2>With love ❤️</h2>
314 |                     <p className='Built'>
315 |                         Built by <a href="https://swizec.com">Swizec</a><br />
316 |                         Cheers ❤️
317 |                     </p>
318 |                     <p className='Years'>
319 |                         It only took me 2 years to get around to opensourcing this.
320 |                         😅
321 |                     </p>
322 |                 </WrapperFooter>
323 |             </Wrapper>
324 |         );
325 |     }
326 | }
327 | render(<Demo />, document.querySelector("#demo"));


--------------------------------------------------------------------------------
/demo/src/prism.css:
--------------------------------------------------------------------------------
  1 | /* PrismJS 1.15.0
  2 | https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript */
  3 | /*
  4 |  Solarized Color Schemes originally by Ethan Schoonover
  5 |  http://ethanschoonover.com/solarized
  6 |  Ported for PrismJS by Hector Matos
  7 |  Website: https://krakendev.io
  8 |  Twitter Handle: https://twitter.com/allonsykraken)
  9 | */
 10 | 
 11 | /*
 12 | SOLARIZED HEX
 13 | --------- -------
 14 | base03    #002b36
 15 | base02    #073642
 16 | base01    #586e75
 17 | base00    #657b83
 18 | base0     #839496
 19 | base1     #93a1a1
 20 | base2     #eee8d5
 21 | base3     #fdf6e3
 22 | yellow    #b58900
 23 | orange    #cb4b16
 24 | red       #dc322f
 25 | magenta   #d33682
 26 | violet    #6c71c4
 27 | blue      #268bd2
 28 | cyan      #2aa198
 29 | green     #859900
 30 | */
 31 | 
 32 | code[class*="language-"],
 33 | pre[class*="language-"] {
 34 | 	color: #657b83; /* base00 */
 35 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 36 | 	text-align: left;
 37 | 	white-space: pre;
 38 | 	word-spacing: normal;
 39 | 	word-break: normal;
 40 | 	word-wrap: normal;
 41 | 
 42 | 	line-height: 1.5;
 43 | 
 44 | 	-moz-tab-size: 4;
 45 | 	-o-tab-size: 4;
 46 | 	tab-size: 4;
 47 | 
 48 | 	-webkit-hyphens: none;
 49 | 	-moz-hyphens: none;
 50 | 	-ms-hyphens: none;
 51 | 	hyphens: none;
 52 | }
 53 | 
 54 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 55 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 56 | 	background: #073642; /* base02 */
 57 | }
 58 | 
 59 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 60 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 61 | 	background: #073642; /* base02 */
 62 | }
 63 | 
 64 | /* Code blocks */
 65 | pre[class*="language-"] {
 66 | 	padding: 1em;
 67 | 	margin: .5em 0;
 68 | 	overflow: auto;
 69 | 	border-radius: 0.3em;
 70 | }
 71 | 
 72 | :not(pre) > code[class*="language-"],
 73 | pre[class*="language-"] {
 74 | 	background-color: #fdf6e3; /* base3 */
 75 | }
 76 | 
 77 | /* Inline code */
 78 | :not(pre) > code[class*="language-"] {
 79 | 	padding: .1em;
 80 | 	border-radius: .3em;
 81 | }
 82 | 
 83 | .token.comment,
 84 | .token.prolog,
 85 | .token.doctype,
 86 | .token.cdata {
 87 | 	color: #93a1a1; /* base1 */
 88 | }
 89 | 
 90 | .token.punctuation {
 91 | 	color: #586e75; /* base01 */
 92 | }
 93 | 
 94 | .namespace {
 95 | 	opacity: .7;
 96 | }
 97 | 
 98 | .token.property,
 99 | .token.tag,
100 | .token.boolean,
101 | .token.number,
102 | .token.constant,
103 | .token.symbol,
104 | .token.deleted {
105 | 	color: #268bd2; /* blue */
106 | }
107 | 
108 | .token.selector,
109 | .token.attr-name,
110 | .token.string,
111 | .token.char,
112 | .token.builtin,
113 | .token.url,
114 | .token.inserted {
115 | 	color: #2aa198; /* cyan */
116 | }
117 | 
118 | .token.entity {
119 | 	color: #657b83; /* base00 */
120 | 	background: #eee8d5; /* base2 */
121 | }
122 | 
123 | .token.atrule,
124 | .token.attr-value,
125 | .token.keyword {
126 | 	color: #859900; /* green */
127 | }
128 | 
129 | .token.function,
130 | .token.class-name {
131 | 	color: #b58900; /* yellow */
132 | }
133 | 
134 | .token.regex,
135 | .token.important,
136 | .token.variable {
137 | 	color: #cb4b16; /* orange */
138 | }
139 | 
140 | .token.important,
141 | .token.bold {
142 | 	font-weight: bold;
143 | }
144 | .token.italic {
145 | 	font-style: italic;
146 | }
147 | 
148 | .token.entity {
149 | 	cursor: help;
150 | }
151 | 


--------------------------------------------------------------------------------
/demo/src/socialShare.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import "./style.css";
 3 | 
 4 | export default class SocialShare extends Component {
 5 |   render() {
 6 |     return (
 7 |         <div>
 8 | <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fd3blackbox.com%2F" target="_blank" aria-label="">
 9 |   <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
10 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
11 |     </div>
12 |   </div>
13 | </a>
14 | <a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Take%20any%20D3%20example%20you%20find%20in%20the%20wild%20and%20wrap%20it%20in%20a%20React%20component.%20Great%20for%20quick%20experiments%20and%20meeting%20deadlines.%20%F0%9F%98%9B&amp;url=https%3A%2F%2Fd3blackbox.com%2F" target="_blank" aria-label="">
15 |   <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
16 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
17 |     </div>
18 |   </div>
19 | </a>
20 | <a class="resp-sharing-button__link" href="https://plus.google.com/share?url=https%3A%2F%2Fd3blackbox.com%2F" target="_blank" aria-label="">
21 |   <div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
22 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"/></svg>
23 |     </div>
24 |   </div>
25 | </a>
26 | <a class="resp-sharing-button__link" href="https://www.tumblr.com/widgets/share/tool?posttype=link&amp;title=Take%20any%20D3%20example%20you%20find%20in%20the%20wild%20and%20wrap%20it%20in%20a%20React%20component.%20Great%20for%20quick%20experiments%20and%20meeting%20deadlines.%20%F0%9F%98%9B&amp;caption=Take%20any%20D3%20example%20you%20find%20in%20the%20wild%20and%20wrap%20it%20in%20a%20React%20component.%20Great%20for%20quick%20experiments%20and%20meeting%20deadlines.%20%F0%9F%98%9B&amp;content=https%3A%2F%2Fd3blackbox.com%2F&amp;canonicalUrl=https%3A%2F%2Fd3blackbox.com%2F&amp;shareSource=tumblr_share_button" target="_blank" aria-label="">
27 |   <div class="resp-sharing-button resp-sharing-button--tumblr resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
28 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5.5v5h5v4h-5V15c0 5 3.5 4.4 6 2.8v4.4c-6.7 3.2-12 0-12-4.2V9.5h-3V6.7c1-.3 2.2-.7 3-1.3.5-.5 1-1.2 1.4-2 .3-.7.6-1.7.7-3h3.8z"/></svg>
29 |     </div>
30 |   </div>
31 | </a>
32 | <a class="resp-sharing-button__link" href="mailto:?subject=Take%20any%20D3%20example%20you%20find%20in%20the%20wild%20and%20wrap%20it%20in%20a%20React%20component.%20Great%20for%20quick%20experiments%20and%20meeting%20deadlines.%20%F0%9F%98%9B&amp;body=https%3A%2F%2Fd3blackbox.com%2F" target="_self" aria-label="">
33 |   <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
34 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
35 |     </div>
36 |   </div>
37 | </a>
38 | <a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fd3blackbox.com%2F&amp;media=https%3A%2F%2Fd3blackbox.com%2F&amp;description=Take%20any%20D3%20example%20you%20find%20in%20the%20wild%20and%20wrap%20it%20in%20a%20React%20component.%20Great%20for%20quick%20experiments%20and%20meeting%20deadlines.%20%F0%9F%98%9B" target="_blank" aria-label="">
39 |   <div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
40 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z"/></svg>
41 |     </div>
42 |   </div>
43 | </a>
44 | 
45 | </div>
46 |     )
47 |   }
48 | }


--------------------------------------------------------------------------------
/demo/src/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  3 |     margin: 0;
  4 |     font-size: 20px;
  5 |     -webkit-font-smoothing: antialiased;
  6 |     line-height: 1.3;
  7 |     
  8 |   }
  9 |   a {
 10 |     color: #DE541E;
 11 |     text-decoration: none;
 12 |     font-weight: 600;
 13 |   }
 14 |   
 15 |   a:hover {
 16 |     color: #000;
 17 |   }
 18 | .bar {
 19 |     fill: steelblue;
 20 | }
 21 | 
 22 | .bar:hover {
 23 |     fill: brown;
 24 | }
 25 | 
 26 | .axis--x path {
 27 |     display: none;
 28 | }
 29 | 
 30 | h1 {
 31 |     color: #DE541E;
 32 |     font-weight: 900;
 33 | }
 34 | .iframe-container {
 35 |     position: relative;
 36 |     overflow: hidden;
 37 |     padding-top: 56.25%;
 38 | }
 39 | .iframe-container iframe {
 40 |     position: absolute;
 41 |       top: 0;
 42 |       left: 0;
 43 |       width: 100%;
 44 |       height: 100%;
 45 |       border: 0;
 46 |   }
 47 | 
 48 | /* Social Share */
 49 | 
 50 |   .resp-sharing-button__link,
 51 |   .resp-sharing-button__icon {
 52 |     display: inline-block
 53 |   }
 54 |   
 55 |   .resp-sharing-button__link {
 56 |     text-decoration: none;
 57 |     color: #fff;
 58 |     margin: 0.5em
 59 |   }
 60 |   
 61 |   .resp-sharing-button {
 62 |     border-radius: 5px;
 63 |     transition: 25ms ease-out;
 64 |     padding: 0.5em 0.75em;
 65 |     font-family: Helvetica Neue,Helvetica,Arial,sans-serif
 66 |   }
 67 |   
 68 |   .resp-sharing-button__icon svg {
 69 |     width: 1em;
 70 |     height: 1em;
 71 |     margin-right: 0.4em;
 72 |     vertical-align: top
 73 |   }
 74 |   
 75 |   .resp-sharing-button--small svg {
 76 |     margin: 0;
 77 |     vertical-align: middle
 78 |   }
 79 |   
 80 |   /* Non solid icons get a stroke */
 81 |   .resp-sharing-button__icon {
 82 |     stroke: #fff;
 83 |     fill: none
 84 |   }
 85 |   
 86 |   /* Solid icons get a fill */
 87 |   .resp-sharing-button__icon--solid,
 88 |   .resp-sharing-button__icon--solidcircle {
 89 |     fill: #fff;
 90 |     stroke: none
 91 |   }
 92 |   
 93 |   .resp-sharing-button--twitter {
 94 |     background-color: #55acee
 95 |   }
 96 |   
 97 |   .resp-sharing-button--twitter:hover {
 98 |     background-color: #2795e9
 99 |   }
100 |   
101 |   .resp-sharing-button--pinterest {
102 |     background-color: #bd081c
103 |   }
104 |   
105 |   .resp-sharing-button--pinterest:hover {
106 |     background-color: #8c0615
107 |   }
108 |   
109 |   .resp-sharing-button--facebook {
110 |     background-color: #3b5998
111 |   }
112 |   
113 |   .resp-sharing-button--facebook:hover {
114 |     background-color: #2d4373
115 |   }
116 |   
117 |   .resp-sharing-button--tumblr {
118 |     background-color: #35465C
119 |   }
120 |   
121 |   .resp-sharing-button--tumblr:hover {
122 |     background-color: #222d3c
123 |   }
124 |   
125 |   .resp-sharing-button--reddit {
126 |     background-color: #5f99cf
127 |   }
128 |   
129 |   .resp-sharing-button--reddit:hover {
130 |     background-color: #3a80c1
131 |   }
132 |   
133 |   .resp-sharing-button--google {
134 |     background-color: #dd4b39
135 |   }
136 |   
137 |   .resp-sharing-button--google:hover {
138 |     background-color: #c23321
139 |   }
140 |   
141 |   .resp-sharing-button--linkedin {
142 |     background-color: #0077b5
143 |   }
144 |   
145 |   .resp-sharing-button--linkedin:hover {
146 |     background-color: #046293
147 |   }
148 |   
149 |   .resp-sharing-button--email {
150 |     background-color: #777
151 |   }
152 |   
153 |   .resp-sharing-button--email:hover {
154 |     background-color: #5e5e5e
155 |   }
156 |   
157 |   .resp-sharing-button--xing {
158 |     background-color: #1a7576
159 |   }
160 |   
161 |   .resp-sharing-button--xing:hover {
162 |     background-color: #114c4c
163 |   }
164 |   
165 |   .resp-sharing-button--whatsapp {
166 |     background-color: #25D366
167 |   }
168 |   
169 |   .resp-sharing-button--whatsapp:hover {
170 |     background-color: #1da851
171 |   }
172 |   
173 |   .resp-sharing-button--hackernews {
174 |   background-color: #FF6600
175 |   }
176 |   .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }
177 |   
178 |   .resp-sharing-button--vk {
179 |     background-color: #507299
180 |   }
181 |   
182 |   .resp-sharing-button--vk:hover {
183 |     background-color: #43648c
184 |   }
185 |   
186 |   .resp-sharing-button--facebook {
187 |     background-color: #3b5998;
188 |     border-color: #3b5998;
189 |   }
190 |   
191 |   .resp-sharing-button--facebook:hover,
192 |   .resp-sharing-button--facebook:active {
193 |     background-color: #2d4373;
194 |     border-color: #2d4373;
195 |   }
196 |   
197 |   .resp-sharing-button--twitter {
198 |     background-color: #55acee;
199 |     border-color: #55acee;
200 |   }
201 |   
202 |   .resp-sharing-button--twitter:hover,
203 |   .resp-sharing-button--twitter:active {
204 |     background-color: #2795e9;
205 |     border-color: #2795e9;
206 |   }
207 |   
208 |   .resp-sharing-button--email {
209 |     background-color: #777777;
210 |     border-color: #777777;
211 |   }
212 |   
213 |   .resp-sharing-button--email:hover,
214 |   .resp-sharing-button--email:active {
215 |     background-color: #5e5e5e;
216 |     border-color: #5e5e5e;
217 |   }
218 |   
219 |   .resp-sharing-button--linkedin {
220 |     background-color: #0077b5;
221 |     border-color: #0077b5;
222 |   }
223 |   
224 |   .resp-sharing-button--linkedin:hover,
225 |   .resp-sharing-button--linkedin:active {
226 |     background-color: #046293;
227 |     border-color: #046293;
228 |   }
229 |   
230 |   .resp-sharing-button--reddit {
231 |     background-color: #5f99cf;
232 |     border-color: #5f99cf;
233 |   }
234 |   
235 |   .resp-sharing-button--reddit:hover,
236 |   .resp-sharing-button--reddit:active {
237 |     background-color: #3a80c1;
238 |     border-color: #3a80c1;
239 |   }
240 |   
241 |   .resp-sharing-button--hackernews {
242 |     background-color: #FF6600;
243 |     border-color: #FF6600;
244 |   }
245 |   
246 |   .resp-sharing-button--hackernews:hover
247 |   .resp-sharing-button--hackernews:active {
248 |     background-color: #FB6200;
249 |     border-color: #FB6200;
250 |   }


--------------------------------------------------------------------------------
/nwb.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   type: 'react-component',
3 |   npm: {
4 |     esModules: true,
5 |     umd: false
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "d3blackbox",
 3 |     "version": "1.2.0",
 4 |     "description": "d3blackbox React component",
 5 |     "main": "lib/index.js",
 6 |     "module": "es/index.js",
 7 |     "files": [
 8 |         "css",
 9 |         "es",
10 |         "lib",
11 |         "umd"
12 |     ],
13 |     "scripts": {
14 |         "build": "tsc && nwb build-react-component",
15 |         "clean": "nwb clean-module && nwb clean-demo",
16 |         "start": "nwb serve-react-demo",
17 |         "test": "nwb test-react",
18 |         "test:coverage": "nwb test-react --coverage",
19 |         "test:watch": "nwb test-react --server"
20 |     },
21 |     "dependencies": {
22 |         "prop-types": "^15.7.2"
23 |     },
24 |     "peerDependencies": {
25 |         "react": "16.x",
26 |         "typescript": "^3.5.2"
27 |     },
28 |     "devDependencies": {
29 |         "babel-plugin-prismjs": "^1.0.2",
30 |         "d3": "^5.9.2",
31 |         "nwb": "0.21.x",
32 |         "prismjs": "^1.16.0",
33 |         "react": "next",
34 |         "react-dom": "next",
35 |         "styled-components": "^4.3.1"
36 |     },
37 |     "author": "Swizec Teller",
38 |     "homepage": "https://d3blackbox.com/",
39 |     "license": "MIT",
40 |     "repository": "",
41 |     "keywords": [
42 |         "react-component"
43 |     ]
44 | }
45 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { D3RenderFunction, Props, State, D3RenderHookFunction } from "./types";
 4 | 
 5 | const D3blackbox = (D3render: D3RenderFunction): React.ComponentType<Props> =>
 6 |     class Blackbox extends React.Component<Props, State> {
 7 |         anchor = React.createRef();
 8 | 
 9 |         componentDidMount() {
10 |             D3render(this.anchor, this.props, this.state);
11 |         }
12 |         componentDidUpdate() {
13 |             D3render(this.anchor, this.props, this.state);
14 |         }
15 | 
16 |         render() {
17 |             const { x, y } = this.props;
18 |             const Component = this.props.component || "g";
19 | 
20 |             return React.createElement(Component, {
21 |                 transform: `translate(${x}, ${y})`,
22 |                 ref: this.anchor
23 |             });
24 |         }
25 |     };
26 | 
27 | export default D3blackbox;
28 | 
29 | export const useD3 = function(render: D3RenderHookFunction) {
30 |     const refAnchor = React.useRef(null);
31 | 
32 |     React.useEffect(() => {
33 |         render(refAnchor.current);
34 |     });
35 | 
36 |     return refAnchor;
37 | };
38 | 


--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
 1 | import { ReactComponentLike } from "prop-types";
 2 | 
 3 | export type D3RenderFunction = (
 4 |     anchor: React.RefObject<unknown>,
 5 |     props: Props,
 6 |     state: State
 7 | ) => void;
 8 | 
 9 | export type D3RenderHookFunction = (anchor: HTMLElement | null) => void;
10 | 
11 | export interface Props {
12 |     x: number;
13 |     y: number;
14 |     component?: ReactComponentLike;
15 | }
16 | 
17 | export interface State {
18 |     [key: string]: any;
19 | }
20 | 


--------------------------------------------------------------------------------
/tests/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "mocha": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/tests/index-test.js:
--------------------------------------------------------------------------------
 1 | import expect from 'expect'
 2 | import React from 'react'
 3 | import {render, unmountComponentAtNode} from 'react-dom'
 4 | 
 5 | import Component from 'src/'
 6 | 
 7 | describe('Component', () => {
 8 |   let node
 9 | 
10 |   beforeEach(() => {
11 |     node = document.createElement('div')
12 |   })
13 | 
14 |   afterEach(() => {
15 |     unmountComponentAtNode(node)
16 |   })
17 | 
18 |   it('displays a welcome message', () => {
19 |     render(<Component/>, node, () => {
20 |       expect(node.innerHTML).toContain('Welcome to React components')
21 |     })
22 |   })
23 | })
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "outDir": "src",
 4 |         "module": "es2015",
 5 |         "target": "es2015",
 6 |         "lib": ["es5", "es6", "es7", "es2017", "dom"],
 7 |         "sourceMap": true,
 8 |         "allowJs": false, // todo: make this false when all .js files have been converted to .ts/.tsx
 9 |         "jsx": "react",
10 |         "moduleResolution": "node",
11 |         "rootDirs": ["src"],
12 |         "forceConsistentCasingInFileNames": true,
13 |         //    "noImplicitReturns": true,    // todo: enable this when all .js files have been converted to .ts/.tsx
14 |         //    "noImplicitThis": true,       // todo: enable this when all .js files have been converted to .ts/.tsx
15 |         //    "noImplicitAny": true,        // todo: enable this when all .js files have been converted to .ts/.tsx
16 |         //    "strictNullChecks": true,     // todo: enable this when all .js files have been converted to .ts/.tsx
17 |         "removeComments": true,
18 |         "suppressImplicitAnyIndexErrors": true,
19 |         "noUnusedLocals": true,
20 |         "declaration": false, // todo: make this true when all .js files have been converted to .ts/.tsx
21 |         "allowSyntheticDefaultImports": true,
22 |         "experimentalDecorators": true,
23 |         "esModuleInterop": true
24 |     },
25 |     "include": ["src/**/*"],
26 |     "exclude": [
27 |         "node_modules",
28 |         "build",
29 |         "build/lib",
30 |         "scripts",
31 |         "es",
32 |         "lib",
33 |         "tests/**",
34 |         ".storybook/**",
35 |         ".idea",
36 |         ".html",
37 |         "src/**/*.test.js",
38 |         "src/**/*.test.ts",
39 |         "src/**/*.stories.js",
40 |         "src/**/*.stories.ts"
41 |     ]
42 | }


--------------------------------------------------------------------------------