React button hover?

Question

I don't know much about react, but I need to do a project. I created styles and elements and i need to give the button hover.

const style = {
  light: {
    popup: {
      width: "427.5px",
      position: "relative",
      boxShadow: "15px 15px 0 #201e74",
      backgroundColor: "rgba(243, 174, 153, 0.9)"
    },
    container: {
        marginLeft: "auto",
        marginRight: "auto",
        width: "90%",
        display: "flex",
        color: "#201e74",
        textAlign: "center",
    },
    formButton: {
        width: "262.5px",
        height: "45px",
        backgroundColor: "#201e74",
        color: "white",
        marginBottom: "50px",
      },

const type = "light";
const html = React.createElement("div", { style: style[type].popup }, 
    React.createElement("div", { style: style[type].container }, 
             React.createElement("button", { style: style[type].formButton },'SUBSCRIBE'),

use radium package if you want to hover inside your style object... — sathish kumar
– sathish kumar, Commented Apr 18, 2019 at 5:45
Possible duplicate of Inline CSS styles in React: how to implement a:hover? — Agney
– Agney, Commented Apr 18, 2019 at 6:12

Kumar · Accepted Answer · 2019-04-18 05:39:34Z

0

I think onMouseEnter and onMouseLeave are the ways to go, but I don't see the need for an additional wrapper component. Here is how I implemented it:

const html = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }

Or you can use Radium it is quite popular inline styles with ReactJS.

Hope it helps

answered Apr 18, 2019 at 5:39

Kumar

1,2171 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React button hover?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related