React JS: Корзина товаров с иконкой

Создадим кнопку, открывающую корзину с товарами. Вместо стандартной кнопки <button> используем иконку из библиотеки react-icons.

Установка и настройка

Установим библиотеку react-icons:

npm i react-icons

Перезапустите сервер после установки. Выберем иконку корзины (например, из @fortawesome/free-solid-svg-icons). Импортируем необходимые компоненты:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faShoppingCart } from '@fortawesome/free-solid-svg-icons';
import React, { useState } from 'react';

Компонент корзины

Создадим компонент Header, содержащий иконку корзины и функционал её открытия/закрытия:

function Header() {
  const [cardOpen, setCardOpen] = useState(false);

  return (
    <div className="header">
      <FontAwesomeIcon 
        icon={faShoppingCart} 
        className={`shopCartButton ${cardOpen ? 'active' : ''}`} 
        onClick={() => setCardOpen(!cardOpen)} 
      />
      {cardOpen && <div className="shopCart"><div>Содержимое корзины</div></div>}
    </div>
  );
}

Здесь cardOpen — состояние, setCardOpen — функция для его изменения. При клике состояние меняется на противоположное (!cardOpen). Класс active добавляется условно, в зависимости от состояния cardOpen. Блок корзины отображается при cardOpen === true.

Стилизация

Добавим стили в index.css:

.shopCartButton {
  float: right;
  cursor: pointer;
  transition: color 500ms ease, transform 200ms ease;
  transform: scale(1);
}

.shopCartButton:hover,
.shopCartButton.active {
  color: #dc3545;
  transform: scale(1.5);
}

.shopCart {
  position: absolute;
  top: 30px;
  right: 0;
  width: 450px;
  min-height: 100px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.header {
  position: relative;
}

Используем position: absolute для корзины и position: relative для шапки, чтобы корзина позиционировалась относительно шапки. Анимация увеличения иконки при наведении и клике реализована через CSS-трансформации.

В этом уроке мы создали функциональную корзину, открывающуюся при клике на иконку. В следующем уроке добавим отображение товаров в корзине.