Effortlessly integrate a fully customizable shopping cart into your React applications with React Shopping Cart—type-safe, flexible, and ready to streamline your e-commerce development workflow!

The @sreed17/shoppingcart library empowers developers to effortlessly integrate a shopping cart functionality into their React applications with utmost flexibility and type safety. You can generate a fully functional shopping cart context, provider, and hook tailored to your product types.

Easily create a shopping cart for any product type by providing a generic type parameter. The library dynamically generates a shopping cart context, provider, and hook specific to your product type, ensuring seamless integration and type safety.

Access the shopping cart state anywhere in your React application using the created use hook. Retrieve essential cart information, such as item count and subtotal, with ease, enabling smooth rendering of shopping cart components.

Interact with the shopping cart state in a type-safe manner. Utilize the provided class instance as the context, allowing for straightforward and type-checked modifications to the cart, ensuring data integrity and reliable application behavior.

You can install shoppingcart using npm or yarn:

npm install @sreed17/shoppingcart
# or
yarn add @sreed17/shoppingcart

To integrate shoppingcart into your React application, follow these steps:

First, install the shoppingcart package via npm or yarn:

npm install @sreed17/shoppingcart

or

yarn add @sreed17/shoppingcart

/**
 * @file MyShoppingCart.tsx
 * @description Shopping cart tailored for your product type
 */

// import shoppingCart function (default) from shoppingcart
import shoppingCart from "@sreed17/shoppingcart";

// Define your product type
interface MyProductType {
	// definition of your product type
}

// Generate the provider and hook for your product type
export const { ShoppingCartProvider, useShoppingCart } =
	shoppingCart<MyProductType>();

// Your are now ready to use the the shopping cart tailored for your product type!

Wrap ShoppingCartProvider around components that need t access the cart.

import {ShoppingCartProvider} from "./MyShoppingCart"
// rest of the code...
return<>
<ShoppingCartProvider>
 // child-components
</ShoppingCartProvider>

You can add onCheckout attribute to set a handler for when checkout method is triggered from the children.

It provides can instance of ShoppingCart class named cart and an is_loading flag. Read the documentation to see all the available methods available in the cart;

/**
 * @file Child-component.tsx
 * @description A child component that uses the shopping cart context.
 */

// ...other imports
import {useShoppingCart} from "./MyShoppingCart";

// other definitions

const ChildComponent:FC<PropType> = ({/* Props */})=>{

/**
 * cart: instance of the shopping cart class, can take null value hence needs null check.
 * is_loading: whether the context is loaded on component mount
 */
const {cart, is_loading} = useShoppingCart();

// null check cart and use the is_loading flag to stabilize rendering

return <div>
<div>Item count: {cart.item_count}<div>

{/** Render the cart items */}
<ul>
{
cart.map((cartItem)=>{
  const {id, aggregate_price, quantity} = cartItem;
  return <li key={id}>
 <span>{id}</span>
 <span>{aggregate_price}</span>
 <span>{quantity}</span>
  </li>
})
}
</ul>

</div>
}

This provider manages the state of the shopping cart and provides access to it throughout the application.

import { ShoppingCartProvider, useShoppingCart } from "./ShoppingCart";

// Use the provider in your application
function App() {
	return (
		<ShoppingCartProvider onCheckout={handleCheckout} persist={persistConfig}>
			{/* Your application components */}
		</ShoppingCartProvider>
	);
}

By default persistance is disabled and the storage is set to an instance of LocalStoragePersistence which uses localstorage api to persist data. You can add your own peristance storage by implementing IStorage interface.

An interface defining methods for storing and retrieving shopping cart data.

The default persistence configuration for the shopping cart.

Here's an example of configuring the persistence settings for the shopping cart:

const persistConfig: Partial<IPersistanceConfig> = {
    disabled: false,
    clear_on_reload: true,
    storage: new LocalStoragePersistence("custom_shopping_cart"),
};

For detailed release notes, please see CHANGELOG.md.

Thank you for considering contributing to this project! Contributions are welcome and encouraged.

If you have any ideas, suggestions, or bug fixes, please follow these steps:

1. Open an Issue: If you encounter a bug, have a feature request, or want to suggest an improvement, please open an issue on GitHub to discuss it.

2. Submit a Pull Request: If you'd like to contribute directly, fork the repository, make your changes, and submit a pull request. Please ensure your pull request follows our contribution guidelines and adheres to our coding standards.

This project uses semantic-release, commitizen, and cz-conventional-changelog to automate versioning and generate changelogs. To commit changes, please use the following command:

npm run commit

Contributions are welcome! If you have any ideas, suggestions, or bug fixes, please open an issue or submit a pull request on GitHub.

!IMPORTANT: The project uses semantic-release and commitizen with cz-conventional-changelog. Use npm run committo commit changes before pushing changes.

Please note that this project is governed by a Code of Conduct. By participating in this project, you agree to abide by its terms.

We appreciate your contributions to making this project better for everyone!

This project is licensed under the MIT License - see the LICENSE file for details.