ReactJS Buttons CheatSheet

Using buttons? You got them all here

Most frontend devs life revolves around creating components and styling them. Me as a backend dev, found myself going through 4–5 StackOverflow links before I could get a single button component up and running. Here is a list of basic operations.

Create New React Project

npx create-react-app react\_button\_cheatsheet

How to Create a Button

class UpgradedButton extends React.Component{
     render(){
          <button>Submit</button>
     }
}

Make It Look Pretty

const StyledButton = styled.button`
    position: absolute;
    height: 10%;
    width: 10%;
    top: 50%;
    left:50%;
    font-size: 2.6vmin;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, 0.05) 0px 3px 20px;
    border-width: initial;
    background-color: grey;
    color: white;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
`

**// change this line in UpgradedButton**  
// <button>Submit</button>
<StyledButton>Submit</StyledButton>

Change Color OnHover

Add this to the style components’ CSS string

const StyledButton = styled.button`
    ...
    ...
    ...
    &:hover {
       background-color: #445b65;
       color: white;
    }
`

Handle Onclick event

handleClick = () => {
    console.log("Button clicked...")
}

...
...

<Button onClick={this.handleClick}>Submit</Button>

Change Text OnClick

handleClick = () => {
   buttonText = this.state.buttonText == "Start" ? "Stop" : "Start"      
   this.setState({buttonText: buttonText})
}

The Complete Code

Something is missing? Leave it on the comment. Liked what you read? Leave a shoutout on Twitter @geeky_bhavani