Render css class in image tag in react

Question

I am making an app in React, I hope to rotate and translate the image once clicked the button.

render: function() {
    var imageSrc = this.props.imageSrc;
    var rotate = this.props.rotate;
    var translate = this.props.translate;
    var opacity = this.props.opacity;
    var scale = this.props.scale;
 
    return (
      <div>
        <img src={imageSrc} tyle={{opacity: opacity? 0.5:1,height: scale? 600:300, width: scale? 800:400}}/>
        <div>
          <input type="file" onChange={this.handleChangeFile} />
        </div>
      </div>
    );
  }
});

I set the opacity and scale property in style tag, but I don't know how to add rotate and translate, since there is not html tag for them.

So i made a variable outside of JXS, var imageRotate; if({rotate}===true){ className='rotator'}

  return (
    <div>
     <img src={imageSrc} style={{className={imageRotate}/>
    <div>

but it doesn't work. i was wondering what is the best way to pass css into the image tag?

wintvelt · Accepted Answer · 2016-05-09 20:24:38Z

In a react way, I would advise to separate concerns:

make your before and after styling in css (and not use inline styles in react), and put the transform, rotate etc in the after-class.
in your react code, add a click handler to your <img>, which applies the new class to your <img> component

Example code (where you change class every single time you click) would look something like this:

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state={ className: 'class1' }
  }
  handleClick() {
    this.setState({
      className: (this.state.className=='class1')? 'class2' : 'class1'
    })
  }
  render() {
    return <div>
      <p className={this.state.className} 
         onClick={() => this.handleClick()}>
           click me to change color
      </p>
    </div>;
  }
}

In this example, class1 or class2 is applied to a <p> element, but the principle is the same.

Working codepen here.

BryanGrezeszak · Accepted Answer · 2016-05-09 20:18:59Z

0

Translating and rotating are part of the CSS transform property. You can set transform in the style pretty much like any other CSS.

For example, to work off the base React JSfiddle:

var Hello = React.createClass({
  render: function() {
    return <div style={{transform:"translate(10px, 10px) rotate(-15deg)"}}>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

See jsfiddle: https://jsfiddle.net/a02jkshm/

answered May 9, 2016 at 20:18

BryanGrezeszak

5772 silver badges8 bronze badges

Collectives™ on Stack Overflow

Render css class in image tag in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related