correct typings, exported them and used them

Author: baseten

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-css-transform",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A React component to help handle complex nested 2d and 3d css transformations ",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/Transform2d.js

@@ -2,15 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mat2d, vec2 } from 'gl-matrix';
 
-import { MULTIPLICATION_ORDER } from './constants';
+import { MULTIPLICATION_ORDER, vec2Shape, glMatrixType } from './constants';
 
 export default class Transform2d extends React.Component {
   static propTypes = {
-    parentMatrixWorld: PropTypes.oneOfType([PropTypes.instanceOf(Float32Array), PropTypes.arrayOf(PropTypes.number)]),
+    parentMatrixWorld: glMatrixType,
     multiplicationOrder: PropTypes.oneOf([MULTIPLICATION_ORDER.PRE, MULTIPLICATION_ORDER.POST]),
-    translate: PropTypes.object,
-    scale: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-    rotate: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    translate: vec2Shape,
+    scale: PropTypes.oneOfType([vec2Shape, glMatrixType, PropTypes.number]),
+    rotate: PropTypes.number,
     children: PropTypes.node.isRequired,
   };
 

src/Transform3d.js

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mat4, vec3 } from 'gl-matrix';
 
-import { MULTIPLICATION_ORDER } from './constants';
+import { MULTIPLICATION_ORDER, vec3Shape, glMatrixType } from './constants';
 
 export default class Transform3d extends React.Component {
   static propTypes = {
-    parentMatrixWorld: PropTypes.oneOfType([PropTypes.instanceOf(Float32Array), PropTypes.arrayOf(PropTypes.number)]),
+    parentMatrixWorld: glMatrixType,
     multiplicationOrder: PropTypes.oneOf([MULTIPLICATION_ORDER.PRE, MULTIPLICATION_ORDER.POST]),
-    translate: PropTypes.object,
-    scale: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
+    translate: vec3Shape,
+    scale: PropTypes.oneOfType([vec3Shape, PropTypes.number]),
     rotate: PropTypes.number,
-    rotateAxis: PropTypes.object,
+    rotateAxis: vec3Shape,
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   };
 

src/constants.js

@@ -42,14 +42,14 @@ export const MULTIPLICATION_ORDER = {
 };
 
 export const vec2Shape = PropTypes.shape({
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
+  x: PropTypes.number,
+  y: PropTypes.number,
 });
 
 export const vec3Shape = PropTypes.shape({
-  x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired,
-  z: PropTypes.number.isRequired,
+  x: PropTypes.number,
+  y: PropTypes.number,
+  z: PropTypes.number,
 });
 
 export const glMatrixType = PropTypes.instanceOf(glMatrix.ARRAY_TYPE);

src/index.js

@@ -1,3 +1,3 @@
-export { MULTIPLICATION_ORDER } from './constants';
+export { MULTIPLICATION_ORDER, glMatrixType, vec2Shape, vec3Shape } from './constants';
 export { default as Transform2d } from './Transform2d';
 export { default as Transform3d } from './Transform3d';