import * as React from "react";
import { render } from "react-dom";
import {
  NodeManager,
  useNodes,
  useRegisteredRef
} from "react-register-nodes";


const Example = () => {
  // useRegisteredRef will return a ref to be used on the DOM node you'd like
  // to register. It accepts a string key to register the node under.
  const ref = useRegisteredRef("shallow");

  // useNodes will return an object containing any DOM nodes we have assigned our refs to
  // in this case, our div will be mapped to the key 'shallow'
  const nodes = useNodes();

  return (
    <React.Fragment>
      <div ref={ref}>
        Register Me!
      </div>

      <div>
        Registered Nodes:
        <pre>{JSON.stringify(Object.keys(nodes), null, 2)}</pre>
      </div>
    </React.Fragment>
  );
};

const rootElement = document.getElementById("root");
render(
  <div id="app">
    <NodeManager>
      <Example />
    </NodeManager>
  </div>,
  rootElement
);