feat: fps

packages/core/src/stage/index.jsx

@@ -8,7 +8,12 @@ const {
   useRef,
 } = React;
 
-const Stage = ({renderable, size, ticker}) => {
+const Stage = ({
+  fps,
+  renderable,
+  size,
+  ticker,
+}) => {
   const ref = useRef();
   useEffect(() => {
     if (!ref.current || !renderable) {
@@ -18,9 +23,9 @@ const Stage = ({renderable, size, ticker}) => {
     const renderer = new Renderer(size);
     ref.current.appendChild(renderer.element);
     const handle = setInterval(() => {
-      ticker(0.03);
+      ticker(1 / fps);
       renderer.render(renderable);
-    }, 33.33);
+    }, 1000 / fps);
     return () => {
       if (renderer) {
         container.removeChild(renderer.element);
@@ -29,13 +34,18 @@ const Stage = ({renderable, size, ticker}) => {
         clearInterval(handle);
       }
     };
-  }, [ref, renderable, size, ticker]);
+  }, [fps, ref, renderable, size, ticker]);
   return (
     <div className="stage" ref={ref} />
   );
 };
 
+Stage.defaultProps = {
+  fps: 30,
+};
+
 Stage.propTypes = {
+  fps: PropTypes.number,
   renderable: PropTypes.shape({}).isRequired,
   size: PropTypes.arrayOf(PropTypes.number).isRequired,
   ticker: PropTypes.func.isRequired,