react-cart-counter

react-cart-counter is a customizable React component library for managing cart item quantities. It provides a simple and user-friendly interface for incrementing and decrementing item counts in shopping carts, with support for TypeScript.

Features

• Customizable initial, minimum, and maximum count values.
• Adjustable increment and decrement steps.
• Customizable button labels for increment and decrement actions.
• Callbacks for count changes to handle custom logic.
• Flexible styling options through className, style, buttonStyle, and inputStyle props.
• No default spinner controls in the input field for a cleaner user experience.

Installation

Install the library using npm or yarn:

npm install react-cart-counter
# or
yarn add react-cart-counter

Usage

Import the CartCounter component and use it in your React application:

import React from 'react';
import CartCounter from 'react-cart-counter';
import './App.css'; # Import your custom styles

const App: React.FC = () => {
  const handleCountChange = (count: number) => {
    console.log('Cart count:', count);
  };

  return (
    <div className="App">
      <h1>Shopping Cart Counter</h1>
      <CartCounter
        initialCount={1}
        minCount={0}
        maxCount={10}
        step={1}
        onCountChange={handleCountChange}
        incrementLabel="+"
        decrementLabel="-"
        className="cart-counter"
        style={{ display: 'flex', alignItems: 'center' }}
        buttonStyle={{ margin: '0 5px' }}
        inputStyle={{ textAlign: 'center', width: '50px' }}
      />
    </div>
  );
};

export default App;

Props

• initialCount (number): The initial count value. Default is 0.
• minCount (number): The minimum count value. Default is 0.
• maxCount (number): The maximum count value. Default is 100.
• step (number): The step value for incrementing/decrementing. Default is 1.
• onCountChange (function): Callback function to handle count changes.
• incrementLabel (string): Label for the increment button. Default is "+".
• decrementLabel (string): Label for the decrement button. Default is "-".
• className (string): Custom CSS class for the component.
• style (object): Inline styles for the component.
• buttonStyle (object): Inline styles for the increment and decrement buttons.
• inputStyle (object): Inline styles for the input field.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Contact

Shrikant Ghuge