Is there any way to pass a variable from ReactJS to a CSS stylesheet?

Question

I'm writing a scrolling ticker with a variable number of components, so I need it to change how far translate3d moves it based on the number of components. The only way I can think to do this is to somehow pass it a number from the JSX file, but I can't find a way to do that. Is there any way to pass the CSS a variable, or some other way to do what I'm wanting?

You could use the javascript to manually add an inline style of the translate3d with the proper variables you want. This may help: facebook.github.io/react/docs/dom-elements.html#style — Wild Beard
– Wild Beard, Commented Dec 15, 2016 at 21:04
CSS doesn't have variables. You have to work with properties of the elements in the document tree. — John Bollinger
– John Bollinger, Commented Dec 15, 2016 at 21:05
@Press I've been trying to do that, but the keyframes thing doesn't seem to work in the inline styling. — SaintWacko
– SaintWacko, Commented Dec 15, 2016 at 21:16
Trying to follow the example there for at least referencing the animation, it complains about the - at the front of -webkit-animation: — SaintWacko
– SaintWacko, Commented Dec 15, 2016 at 21:21
@SaintWacko you can't do keyframes/create/edit animations inline. You would need to come up with a way to do all that via inline styles (at least afaik) or apply a class that references your variable. So class="translate3d var30" could be something like transform: translate3d(-30px, 0, 0); or whatever you're doing. It's not a good solution but without knowing 100% what you're trying to do can only guess. — Wild Beard
– Wild Beard, Commented Dec 15, 2016 at 21:28

GG. · Accepted Answer · 2016-12-17 05:07:00Z

There are several « CSS in JS » libraries which allows you to add keyframes to your components animations. As you write your styles in your JavaScript, you can directly use your components props/states or some other constants to create your components styles.

The 3 following libraries have a keyframes support (I've personally been using the first one):

Styled-Components (GitHub)

import styled, { keyframes } from 'styled-components';

const rotate360 = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate360} 2s linear infinite;
`;

Glamor (GitHub)

import { css } from 'glamor'

let bounce = css.keyframes('bounce', {
  '0%': { transform: 'scale(0.1)', opacity: 0 },
  '60%': { transform: 'scale(1.2)', opacity: 1 },
  '100%': { transform: 'scale(1)' }
})

<div {...css({
  animation: `${bounce} 2s`,
  width: 50, height: 50,
  backgroundColor: 'red'
})}>
  bounce!
</div>

Aphrodite (GitHub)

const translateKeyframes = {
  '0%': { transform: 'translateX(0)' },
  '50%': { transform: 'translateX(100px)' },
  '100%': { transform: 'translateX(0)' },
};

const opacityKeyframes = {
  'from': { opacity: 0 },
  'to': { opacity: 1 }
};

const styles = StyleSheet.create({
  zippyHeader: {
    animationName: [translateKeyframes, opacityKeyframes],
    animationDuration: '3s, 1200ms',
    animationIterationCount: 'infinite',
  },
});

<div className={css(styles.zippyHeader)}>...</div>

Collectives™ on Stack Overflow

Is there any way to pass a variable from ReactJS to a CSS stylesheet?

2 Answers 2

Styled-Components (GitHub)

Glamor (GitHub)

Aphrodite (GitHub)

More reading about the « CSS in JS » pattern

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Styled-Components (GitHub)

Glamor (GitHub)

Aphrodite (GitHub)

More reading about the « CSS in JS » pattern

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related