Skip to content

Instantly share code, notes, and snippets.

@guylaor

guylaor/ReactJS_transform_CSS_example.js

Last active August 20, 2022 18:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save guylaor/31d859f91bd5e601fccb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save guylaor/31d859f91bd5e601fccb to your computer and use it in GitHub Desktop.
Download ZIP
Using CSS transform: translate(...) with ReactJS
Raw
ReactJS_transform_CSS_example.js
render: function() {
var cleft = 100;
var ctop = 100;
var ctrans = 'translate('+cleft+'px, '+ctop+'px)';
var css = {
transform: ctrans
}
return (
<div style={css} />
)
}
@guylaor

guylaor commented Sep 17, 2015

Copy link
Copy Markdown
Author

According to https://facebook.github.io/react/tips/inline-styles.html

CSS styles need to be passes as an object to the component. However, if you are trying to use transform styles, you need to first concatenate the string and then pass it to the object. Otherwise, you will get an error.

@iamjohnmills

iamjohnmills commented Aug 20, 2022 •
edited
Loading

Copy link
Copy Markdown

Here's another way that worked for me:

<div style={{ transform: `translate(10px, 20px)` }}></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment