DEV Community

loading...

ReactJS Buttons CheatSheet

bhavaniravi profile image Bhavani Ravi Originally published at Medium on ・2 min read

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

Discussion (0)

pic
Editor guide