This also works for all CSS-in-JS implementations that allow CSS custom properties, such as styled-components.
Show this thread
Did you know that you can use CSS variables in @reactjs? Add them to the style={{...}} attribute for dynamic, customizable effects such as staggered animations:pic.twitter.com/OdKLlEpOQD
-
-
-
Also, I forgot the key={...} attribute on each <li>, and I'm ashamed. Don't forget it.
Show this thread
End of conversation
New conversation -
-
-
I mean, couldn't you just use a regular JS variable for that?
-
Separation of concerns. What if you wanted to change the stagger interval, or modify it via media queries, or remove it for prefers-reduced-animation, or do something else with the --i var, or have different staggering behavior depending on the class, etc. etc.?
-
Think of CSS variables the same way as React props. You're delegating the responsibility of handling those props to the styles, which greatly reduces complexity and difficulty in theming, media queries, inspecting styles, etc.
End of conversation
New conversation -
-
-
Is this just importing the CSS file via webpack? How does it work? Does it work if the CSS file is extracted and loaded on the page separately?
-
That's up to you. Use whatever CSS implementation you'd like.
-
Right but how are the variables in the CSS being exposed to the JS? I didn't know that was possible. Is this just a browser feature?
-
You mean the CSS variables (e.g., --i)? Yes, these are modern browser features known as "CSS Custom Properties"
End of conversation
New conversation -
-
-
Holy guacamole this is so easy... and to think I would have brought in a library for something like this.pic.twitter.com/QenqvgfTxo
-
@erikras ^ here's your example!
End of conversation
New conversation -
-
-
yeah, ever css solution and every inline styles implementation can do it in every library or plain DOM. The only problem is it is not supported in IE.
-
Staggered animations are definitely a progressive enhancement. I don't mind them not working in IE.
End of conversation
New conversation -
-
-
Great stuff --- used this here: https://medium.com/@cris_o/heatmap-from-time-series-data-with-d3js-react-tips-and-patterns-9d17a218d7f …
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
Wait wait wait... What? So... I can hand off a JS value that _real_ CSS will pick up on for dynamic styling? What is this sorcery? It is amazing! This is almost the interop I've been searching for.
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
Yup, works in Vue as well! I recently discovered it when trying to create some configurable props for a component.
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
I knew, but Its pretty smart to use it for the animation delay
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
I had no idea, now that's a good reason for me to consider ReactJS instead of my beloved jQuery. So you mean like SASS variables can be used there?
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
Have not seen this in
#VueJS yetThanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.