I was surfing on the web in the search of Cart Icon which has Count on it. I did not find any easy way of doing that, so here is my attempt to achieve it through React using basic CSS properties.
Dependencies
- @mui/icons-material
- @mui/material
- @mui/styles
1. We will start by creating CartCounter component in our react app.
CartCounter component is a functional component which takes props object as a parameter. The object passed has following properties
- size : number of items in a cart.
- color : color for the Icon and digit.
- circleBg : backgroundColor for circle.
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
export default function CartCounter(props) {
return (
<>
<ShoppingCartIcon
style={{ fontSize: "48px", color: `${props.cartstyle.color}` }}
/>
</>
);
}
App.js
import CartCounter from "./CartCounter";
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Number Of Items in A Cart</h1>
<div style={{ paddingTop: "1rem" }}>
<CartCounter
cartstyle={{
size: 3,
color: "#000",
circleBg: "#ff6161"
}}
/>
</div>
</div>
);
}
If anyone want to checkout the code, can see on
codesandbox
2. Now comes the part of adding Icon
We will use material icon for that.
Inside CartCounter.js use ShoppingCartIcon from @mui/icons-material/ShoppingCart. Set fontSize and color received from parent App.js as per your need.
import Circle from "./Circle.js";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
export default function CartCounter(props) {
return (
//putting position: "relative" on the parent
//makes anything inside of it with position: "absolute" relative to parent.
<div style={{ position: "relative" }}>
<ShoppingCartIcon
style={{
fontSize: "48px",
color: `${props.cartstyle.color}`
}}
/>
<Circle cartstyle={props.cartstyle} />
</div>
);
}
3. Now comes the part of positioning Circle.
Create separate Circle.js for maintaining modularity and pass props to it.
I have explained code using comments. That's the way of programmer to make code understand.
import React from "react";
//using makeStyles api to link
//style sheet with a function component
//using the hook pattern
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
circle: {
//defining circle
height: "20px",
width: "20px",
borderRadius: "40%",
//postion absolute helps to put
//element relative to containing unit
position: "absolute",
//adjusting positon of circle
bottom: "39px",
left: "17px",
padding: "2px",
fontWeight: "bold"
}
});
const Circle = (props) => {
const classes = useStyles();
return (
<div>
<div
// In order to apply props received, we have used style property
style={{
backgroundColor: `${props.cartstyle.circleBg}`,
color: `${props.cartstyle.color}`,
border: `solid ${props.cartstyle.color}`
}}
className={classes.circle}
>
<span>{props.cartstyle.size}</span>
</div>
</div>
);
};
export default Circle;
final output here
source code
Top comments (0)