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
Top comments (0)