refactor: custom renderer, etc

packages/react/src/components/stage/index.jsx

@@ -17,19 +17,16 @@ const marks = {
   8: '8x',
 };
 
-const Stage = memo(({
+const Stage = ({
   centered,
   renderable,
+  renderer,
   scalable,
   size,
   ticker,
 }) => {
   const ref = useRef();
-  const [renderer, setRenderer] = useState();
   const [scale, setScale] = useState(1);
-  useEffect(() => {
-    setRenderer(new Renderer([0, 0]));
-  }, []);
   useEffect(() => {
     if (!renderable) {
       return;
@@ -46,8 +43,8 @@ const Stage = memo(({
       return undefined;
     }
     renderer.resize(size);
-    const container = ref.current;
-    ref.current.appendChild(renderer.element);
+    const canvasHost = ref.current;
+    canvasHost.appendChild(renderer.element);
     let handle;
     const tick = (elapsed) => {
       ticker(elapsed);
@@ -57,7 +54,7 @@ const Stage = memo(({
     tick(0);
     return () => {
       if (renderer) {
-        container.removeChild(renderer.element);
+        canvasHost.removeChild(renderer.element);
       }
       if (handle) {
         cancelAnimationFrame(handle);
@@ -81,10 +78,11 @@ const Stage = memo(({
       <div className="canvas-host" ref={ref} />
     </div>
   );
-});
+};
 
 Stage.defaultProps = {
   centered: true,
+  renderer: new Renderer([0, 0]),
   scalable: true,
 };
 
@@ -92,10 +90,18 @@ Stage.displayName = 'Stage';
 
 Stage.propTypes = {
   centered: PropTypes.bool,
-  renderable: PropTypes.shape({}).isRequired,
+  renderable: PropTypes.shape({
+    position: PropTypes.shape({}),
+    scale: PropTypes.shape({}),
+  }).isRequired,
+  renderer: PropTypes.shape({
+    element: PropTypes.shape({}),
+    render: PropTypes.func,
+    resize: PropTypes.func,
+  }),
   scalable: PropTypes.bool,
   size: PropTypes.arrayOf(PropTypes.number).isRequired,
   ticker: PropTypes.func.isRequired,
 };
 
-export default Stage;
+export default memo(Stage);