CODEWITHSUNDEEP
javascriptreactjs
alexx0118
alexx0118

Reputation: 21

Implementing this in Reactjs

I have a rotating function in js with html and css files. How can I implementing this in Reactjs? It's not working in React, but if I try to compile it online, it works.

html section:

<button id="button">Click me!</button> <div id="container">   <img src="https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg" id="image" /> </div>

js section:

 var angle = 0,
  img = document.getElementById('container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 180;
  img.className = "rotate" + angle;
}

css section:

#container {
   max-width: 100%;
   max-height: 100%;
  overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
  max-width: 100%;
  max-height: 100%;
}
#image {
  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
   max-width: 100%;
    transition: all 1400ms; 
}
#container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}

Upvotes: 0

Views: 61

Answers (1)

wdm
wdm

Reputation: 7189

In this example a button click will trigger the handleClick event handler which will update this.state.imageClass.

Demo: https://codesandbox.io/s/149v7k4ox4

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            angle: 0,
            imageClass: ''
        };
    }
    handleClick = () => {
        const angle = (this.state.angle + 90) % 180;
        this.setState({
            angle,
            imageClass: "rotate" + angle
        });
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Click me!</button>
                <div id="container" className={this.state.imageClass}>
                    <img id="image" src="..."/>
                </div>
            </div>
        );
    }
}

Upvotes: 1

Related Questions