{"I have a default position of {x: 25, y: 25}, so I'm slightly offset."}
@@ -181,4 +191,44 @@ class App extends React.Component {
}
}
+class RemWrapper extends React.Component {
+ // PropTypes is not available in this environment, but here they are.
+ // static propTypes = {
+ // style: PropTypes.shape({
+ // transform: PropTypes.string.isRequired
+ // }),
+ // children: PropTypes.node.isRequired,
+ // remBaseline: PropTypes.number,
+ // }
+
+ translateTransformToRem(transform, remBaseline = 16) {
+ const convertedValues = transform.replace('translate(', '').replace(')', '')
+ .split(',')
+ .map(px => px.replace('px', ''))
+ .map(px => parseInt(px, 10) / remBaseline)
+ .map(x => `${x}rem`)
+ const [x, y] = convertedValues
+
+ return `translate(${x}, ${y})`
+ }
+
+ render() {
+ const { children, remBaseline = 16, style } = this.props
+ const child = React.Children.only(children)
+
+ const editedStyle = {
+ ...child.props.style,
+ ...style,
+ transform: this.translateTransformToRem(style.transform, remBaseline),
+ }
+
+ return React.cloneElement(child, {
+ ...child.props,
+ ...this.props,
+ style: editedStyle
+ })
+ }
+}
+
+
ReactDOM.render(
, document.getElementById('container'));
diff --git a/example/index.html b/example/index.html
index 5af754a0..cb8a3f7f 100644
--- a/example/index.html
+++ b/example/index.html
@@ -51,6 +51,16 @@
padding: 10px;
float: left;
}
+
+
+ /*
+ * RemWrapper needs to take it's styles from this element,
+ * and this element can't have an absolute position after it's kicked in.
+ * AFAIK it's not possible to do this directly in the RemWrapper component.
+ */
+ .rem-position-fix {
+ position: static !important;
+ }