Author avatar

Vivek Kumar

Creating a Hover Button for ReactJS

Vivek Kumar

  • Jun 27, 2019
  • 6 Min read
  • 23 Views
  • Jun 27, 2019
  • 6 Min read
  • 23 Views
Web Development
React

Introduction

Most professional animators prefer to go with the React JS framework, mainly because it can support an enormous number of libraries pertaining to styles, colors, and margins. But, when it comes to the tabular animations, the framework is also an acclaimed choice.

In order to understand things clearly, let’s use the example of the creation of a hover button for React JS. It is one of the most convenient approaches, if done in the right way. After the completion of this guide, you won’t face any more problems with the hover button creation issue.

The Customary Coding Approach

The standard coding process that we are going to use in this instance is shown below:

1
2
3
4
5
6
7
8
9
10
11
var Category = React.createClass({displayName: 'Category',
  render: function () {
      return (
        React.createElement("div", {className: "row"}, 
        React.createElement("button", null, "Search",   {OnMouseEnter: To be learned})
      
    );
  
});

React.render(React.createElement(Category), contain);
javascript

Here it is essential to understand that, for the creation of the new button in a whole, one can change to the style/label of the button as shown in the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var HoverButton = React.createClass({
    getInitialState: function () {
        return {hover: false};
    },

    mouseOver: function () {
        this.setState({hover: true});
    },

    mouseOut: function () {
        this.setState({hover: false});
    },

    render: function() {
        var label = "foo";
        if (this.state.hover) {
            label = "bar";
        
        return React.createElement(
            "button",
            {onMouseOver: this.mouseOver, onMouseOut: this.mouseOut},
            label
        );
    
});

React.render(React.createElement(HoverButton, null), document.body);
javascript

Now, after going through this command, some of you may suggest that it is better to implement CSS in order to handle the matter. But, as our priority is to use React JS in this example, then it is simply recommended to set the flag in the true state while entering the command for the onMouseEnter. After the completion of this step, all you are required to do is set the same flag into the false command in the onMouseLeave. So, no fancy approach is required and solution can be attained on a straightforward basis.

The Addition of Hover Events in React Component

It is not only the button tags that require hover events. There are certainly other events that require hover events to make things effective and compelling. The following are different ways by which it can be achieved.

The Styled Components

I would certainly recommend the application of the styled components, as it is arguably one of the key libraries available out there that applies a style to HTML. Just have a glance over the following commands and you are going to understand the application and its worth.

1
2
yarn add styled-components
npm install styled-components
1
2
3
4
5
6
7
8
import styled from 'styled-components';

const HoverText = styled.p`
	color: #000;
	:hover {
		color: #ed1212;
		cursor: pointer;
	}
javascript

In addition to that, in the class, when its time to use your p tag, you’ll want to replace it with our HoverText component. So, rather than -

1
<p > Test </ p>
javascript
  • it is recommended that you use the following command in order to avail the right results:
1
<HoverText > Test </ HoverText>
javascript

It is quite simple and convenient! Don’t you think?

The Javascript Program Handlers

If you are looking for basic example, then it is advisable that you don’t go with the next approach. The approach that we are going to discuss here is specifically meant for the scenarios that are complicated in nature.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
constructor(props) {
	super(props)
	this.state = {
		hover: false
	}
}

toggleHover() {
	this.setState({hover: !this.state.hover})
}

render {
   var linkStyle;
   if (this.state.hover) {
     linkStyle = {color: '#ed1212',cursor: 'pointer'}
   } else {
     linkStyle = {color: '#000'}
   
	return(
		<p style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Test</p>
	)
}
javascript

Now, in the code given below, you are going to find that the CSS approach is quite identical to that of the styled components. Within the CSS file concerned with your work, the set up would look like the following:

1
2
3
4
5
6
7
p {
	color: #000;
	:hover {
		color: #ed1212;
		cursor: pointer;
	}
}
css

Conclusion

So, the next time that you are strategizing about the creation of the hover button for React JS, then you are going to find that the approach that you have followed via this guide has made things much easier for you. The commands used here are prolific with the style components as well as render results in the CSS setup. The commands are well tested and rendered positive results, even when the variables have been changed to the extreme level.

0