diff --git a/src/Transform2d.tsx b/src/Transform2d.tsx index d2bc273..8034896 100644 --- a/src/Transform2d.tsx +++ b/src/Transform2d.tsx @@ -73,14 +73,13 @@ export function apply2dTransforms({ } } -const Transform2d = ({ - children, +export function use2dTransformations({ parentMatrixWorld, translate, scale, rotate, multiplicationOrder = 'POST', -}: Transform2dProps) => { +}: Omit) { const safeParentMatrixWorld = useFactoryRef( () => 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({ cssMatrixPrefix: 'matrix', matrixWorld, diff --git a/src/Transform3d.tsx b/src/Transform3d.tsx index 852dab3..4975f4c 100644 --- a/src/Transform3d.tsx +++ b/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) { const safeParentMatrixWorld = useFactoryRef( () => 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({ cssMatrixPrefix: 'matrix3d', matrixWorld, diff --git a/src/index.ts b/src/index.ts index fc5b662..c21e44e 100644 --- a/src/index.ts +++ b/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'; diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index 77a2d47..afc7e6c 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/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],