Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success.

My goal is to achieve a result similar to the image shown here: enter image description here

Here is the code snippet I've been using:

<BagContainer>
  <Bag src={bag} hideIcons={hideIcons} title="bag" onClick={openCart}/>
  <Number>5</Number>
</BagContainer>

export const BagContainer=styled.div`
    position: relative;
    width: fit-content;
`
export const Bag= styled.img<{hideIcons:boolean}>`
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.8rem;
    display: ${(icon) => icon.hideIcons ? 'none' : 'inline'}

`;


export const Number=styled.span`


`
htmlcssreactjsiconsstyled-components

Answer №1

export const ItemBox = styled.div<{showIcons:boolean}>`
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  display: ${(icon) => icon.showIcons ? 'block' : 'none'}
  position: relative;
`;

export const Quantity = styled.span`
  position: absolute;
  right: 0;
  top: 0;
  transform: translate3d(50%, -50%, 0);
`;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for consuming a REST API to retrieve JSON data and assign it to a variable for use in React JS

I'm currently working on developing a shopping application using React.js. I found inspiration from a sample application on https://codepen.io/paulkim/pen/oZLavq , and now I am looking to fetch product information from an API call. I have attempted to ...

javascriptreactjsreact-redux

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

Maximizing the efficiency of a personalized hook that facilitates data sharing in React

I have developed a unique Custom Hook that looks like the following: import { useEffect, useState } from 'react'; import axios from 'axios'; const myCustomHook = () => { const [countries, setCountries] = useState([]); const [i ...

javascriptreactjsrequestaxios

When using @msal-browser's loginPopup() function, make sure to include the 'client_secret' input parameter in the request

I'm currently in the process of obtaining the authorization token to configure an online Microsoft Teams meeting. When I click on continue, it prompts a login popup window and then displays the following error: The provided request must include a &ap ...

reactjsms-access-2010azure-ad-msalmsal-react

Encountered a higher number of hooks rendered compared to the previous render error on a component without any conditional hook usage

Within my codebase, I have a component that is responsible for rendering a clickable link to initiate a file upload process. import { gql, useLazyQuery, useMutation } from '@apollo/client'; import { useEffect, useState } from 'react'; i ...

reactjstypescriptapollo-client

Tips for displaying a Bootstrap 4 table on smaller screens

I have a Bootstrap 4 table filled with JSON data. The table renders perfectly on the UI, but users on smaller devices must scroll to view all the data. Despite there not being much data in the HTML table, users still need to scroll on small devices. I wa ...

csshtmlbootstrap-4media-queriesbootstrap-table

Discovering the solution to the Access-Control-Allow-Origin issue

When attempting to upload my mern project on cpanel, I keep encountering a CORS issue. I have implemented the following function in Express JS, but the problem persists: app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin&a ...

reactjsexpress

How to align 3 buttons in a div using CSS

My design has 3 buttons that I want to always remain centered on the page, but they seem to skew off-center as the window widens (as shown in the image). What HTML/CSS code can I use to ensure that these buttons are perfectly centralized at all times? It ...

htmlcss

Enclose elements in a div using a jQuery each function

I have successfully parsed data from an XML feed to JSON, but now I want to wrap each part of the data within a div. Here is the code snippet I am working with: var newsDiv = $('<div class="news-feed">').appendTo($("body")); $(release ...

javascriptjqueryhtmleach

Encountering an E401 error code following the execution of the 'npm install' command

I'm currently attempting to duplicate a ReactJs project using git clone. However, upon opening the project in VS CODE and running 'npm install,' I encountered an E401 error with the message below: npm ERR! code E401 npm ERR! Unable to authen ...

node.jsreactjsmacosvisual-studio-codenpm

Looking for advice on using media queries to resize my background image - any tips?

I'm struggling to resize my background image using media queries. Can anyone offer suggestions or solutions? I've tried applying the media query for my background image like I do with other elements, and it's not working properly. The issue ...

htmlcssresponsive-designmedia-queriesbackground-image

Having issues with stripe payments in my ReactJS application

I've encountered an issue while attempting to process a credit card payment using Stripe. Here's the code snippet I'm currently working with: import StripeCheckout from "react-stripe-checkout" // import confirmPayment from 'st ...

node.jsreactjsstripe-paymentspaymentcard

Issue with Material UI textfield: Unable to enter input or set values on a controlled component

I recently attempted to develop a customized input component using the inputRef feature in Material UI's Input component. Although I successfully implemented the component reference, I encountered an issue where I could not enter any values into the t ...

reactjsmaterial-ui

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Exploring the capabilities of animate.css and jQuery within a bootstrap environment has been quite interesting for me. However, I've encountered a major issue! I am attempting to trigger animations on mouseenter / mouseleave, which led me to create a ...

javascriptjquerycsscss-animations

Error: Unable to locate module: Could not find '@date-io/date-fns'

I encountered an error while using React Material UI: Module not found: Can't resolve '@date-io/date-fns'. Below are the dependencies listed in my package.json file: "dependencies": { "@date-io/date-fns": "^2.0.0", "@material-ui/co ...

reactjsmaterial-uidate-fns

Modify the font style of the jQuery autocomplete box to customize the text appearance

Hello, I'm a beginner with jquery and currently experimenting with the autocomplete feature. I managed to change the font of the dropdown list successfully but struggling to do the same for the input field itself. Does anyone know how to achieve this ...

javascriptjqueryhtmlcssfonts

Tips for sending custom props to a dynamic page in Next.js

I have created a component called Card.js which is responsible for linking to dynamic pages when a card is clicked. My goal is to pass a value, such as 'category', to the dynamic page [id].js so that I can implement additional logic there. Card. ...

javascriptreactjsnext.js

Getting TypeScript errors when incorporating a variant into a Material-UI button using a custom component

I have created a unique Link component inspired by this particular example. Take a look at the code below: import classNames from 'classnames'; import {forwardRef} from 'react'; import MuiLink, {LinkProps as MuiLinkProps} from '@ma ...

reactjstypescriptmaterial-uitypescript-typings

Having trouble changing the background color of the AppBar?

Looking for some assistance with a coding issue I'm having. Here's the code snippet: import { AppBar } from "@mui/material"; import { makeStyles } from "@mui/styles"; const useStyles = makeStyles({ root: { backgro ...

reactjsmaterial-ui

To ensure proper functionality, make sure that Python Selenium's Geckodriver is correctly

I want to automate form filling using Selenium. Below is the HTML code for the form: <!DOCTYPE html> <html> <body> <h2>Text input fields</h2> <form> <label for="fname">First name:</label><br& ...

pythonhtmlseleniumwebautomation