Merge pull request #2 from baseten/expose-transform-hooks

Separate out transformations as hooks and export from library

Author: baseten

src/Transform2d.tsx

@@ -73,14 +73,13 @@ export function apply2dTransforms({
   }
 }
 
-const Transform2d = ({
-  children,
+export function use2dTransformations({
   parentMatrixWorld,
   translate,
   scale,
   rotate,
   multiplicationOrder = 'POST',
-}: Transform2dProps) => {
+}: Omit<Transform2dProps, 'children'>) {
   const safeParentMatrixWorld = useFactoryRef<mat2d>(
     () => parentMatrixWorld || mat2d.create(),
   );
@@ -101,6 +100,28 @@ const Transform2d = ({
     rotate,
   });
 
+  return {
+    matrix,
+    matrixWorld,
+  };
+}
+
+const Transform2d = ({
+  children,
+  parentMatrixWorld,
+  translate,
+  scale,
+  rotate,
+  multiplicationOrder = 'POST',
+}: Transform2dProps) => {
+  const { matrixWorld } = use2dTransformations({
+    parentMatrixWorld,
+    translate,
+    scale,
+    rotate,
+    multiplicationOrder,
+  });
+
   const render = useRender<mat2d>({
     cssMatrixPrefix: 'matrix',
     matrixWorld,

src/Transform3d.tsx

@@ -80,15 +80,14 @@ export function apply3dTransforms({
   }
 }
 
-const Transform3d = ({
-  children,
+export function use3dTransformations({
   parentMatrixWorld,
   translate,
   scale,
   rotate,
   rotateAxis,
   multiplicationOrder = 'POST',
-}: Transform3dProps) => {
+}: Omit<Transform3dProps, 'children'>) {
   const safeParentMatrixWorld = useFactoryRef<mat4>(
     () => parentMatrixWorld || mat4.create(),
   );
@@ -112,6 +111,30 @@ const Transform3d = ({
     rotateAxis,
   });
 
+  return {
+    matrix,
+    matrixWorld,
+  };
+}
+
+const Transform3d = ({
+  children,
+  parentMatrixWorld,
+  translate,
+  scale,
+  rotate,
+  rotateAxis,
+  multiplicationOrder = 'POST',
+}: Transform3dProps) => {
+  const { matrixWorld } = use3dTransformations({
+    parentMatrixWorld,
+    translate,
+    scale,
+    rotate,
+    rotateAxis,
+    multiplicationOrder,
+  });
+
   const render = useRender<mat4>({
     cssMatrixPrefix: 'matrix3d',
     matrixWorld,

src/index.ts

@@ -1,6 +1,7 @@
 export * from './propTypes';
 export { useFactoryRef } from './useFactoryRef';
-export { default as Transform2d } from './Transform2d';
-export { default as Transform3d } from './Transform3d';
+export { default as Transform2d, use2dTransformations } from './Transform2d';
+export { default as Transform3d, use3dTransformations } from './Transform3d';
 export type { Transform2dProps } from './Transform2d';
 export type { Transform3dProps } from './Transform3d';
+export type { GLMatrixType, Vec2Object, Vec3Object } from './types';

test/__snapshots__/index.test.ts.snap

@@ -7,6 +7,8 @@ exports[`index export modules for react-css-transform 1`] = `
   "mat2dGlMatrix": [Function],
   "mat4GlMatrix": [Function],
   "mat4GlMatrixValidator": [Function],
+  "use2dTransformations": [Function],
+  "use3dTransformations": [Function],
   "useFactoryRef": [Function],
   "vec2GlMatrix": [Function],
   "vec2Obj": [Function],