@bolttech/molecules-compare NPM

Compare Component

A React component for comparing products.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/frontend-foundations @bolttech/molecules-compare

yarn add @bolttech/frontend-foundations @bolttech/molecules-compare

Props

The Compare component accepts the following properties:

Prop	Type	Description
title	`string`	The title for the comparison section.
productsSelected	`array`	An array of selected products to be compared.
btnCompareTitle	`string`	The title for the compare button.
btnCloseTitle	`string`	The title for the close button.
btnCloseModalTitle	`string`	The title for the close button in the modal.
onClose	`function`	Callback to be called when the close button is clicked.
onRemove	`function`	Callback to be called when a product is removed.

Usage

import React, { useState } from 'react';
import { BolttechThemeProvider, bolttechTheme } from '@bolttech/frontend-foundations';
import Compare from '@bolltech/molecules-compare';

const ExampleComponent = () => {
  const products = [
    // Array of selected products for comparison
  ];

  const handleRemoveProduct = (productId) => {
    // Logic to remove a product from comparison
  };

  const handleClose = () => {
    // Logic to handle the close action
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Compare
        title="Product Comparison"
        productsSelected={products}
        btnCompareTitle="Compare"
        btnCloseTitle="Close"
        btnCloseModalTitle="Close Modal"
        onClose={handleClose}
        onRemove={handleRemoveProduct}
      />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;