Add react-use-d3

[inokawa]

A React hook to use D3 in React.

[moklick]

Hey @inokawa

thanks for the PR. I haven't seen it and now it's closed. Did you stop working on the project? Honestly I don't get the advantage of using your hook. When I am working with React+D3 I prefer to build up the SVGs with JSX but that's my own preference.. However if I would like to use the regular d3 API I would do:

import { useEffect, useRef } from 'react'
import * as d3 from "d3";

export const Component = ({ width, height, data }) => {
  const container = useRef(null); 

  useEffect(() => {
      const svg = d3
        .select(container.current)
        .attr("width", width)
        .attr("height", height);

      svg
        .append("text")
        .attr("x", width / 2)
        .attr("y", height / 2)
        .attr("fill", "black")
        .text(data);
    },
    [width, height, data]
  );

  return (
    <div>
     <svg ref={container} />
    </div>
  );
};

How does your hook simplify the work here?

[inokawa]

@moklick Yes, I've realized that it has little advantage over using useEffect after building it. So I stopped working on it and I'm building something like tweenable JSX (it's not public though), which can be combined with some of d3 functions. Thanks.

[moklick]

Got it :) Let us know when it's published then we can add it to this list.

[inokawa]

Hello, I finally made it but it does not dependent on D3 (although it's aiming to cover some of D3's usecases in React), so I wouldn't make PR. FYI: https://github.com/inokawa/react-animatable