react-easy-cart

    1.1.6 • Public • Published

    Shopping cart integrator

    Easy integration of shopping cart into React JS applications.

    NB: still at initial stages of development, You can test it out 🤓 .

    Installation

     npm i react-easy-cart --save
    

    Simple setup

    import { CartButton, CartWrapper } from "react-easy-cart"
    import React from "react";
    import { CartButton, CartWrapper } from "react-easy-cart"
    
    function App() {
    
      const products = [
        { id: 1, name: 'Stove', price: 6000, description: "Amazing product for cooking faster" },
        { id: 2, name: 'Cooker', price: 12000, description: "Amazing product for cooking faster" },
      ]
    
      const continueToCheckout = (continueToCheckoutData) => {
        console.log("continueToCheckoutData", continueToCheckoutData)
      }
    
      return (
        <CartWrapper cartShow={true} currencySign="$" continueToCheckout={continueToCheckout}>
          <div>
            {products.map((product, index) =>
              <React.Fragment key={index}>
                <div>
                  <b>{product.name}</b>
                  <p>{product.price}</p>
                  <CartButton
                    product={{
                      name: product.name,
                      id: product.id,
                      price: product.price,
                      description: product.description,
                      quantity: 1,
                      image: "https://drive.google.com/uc?id=18KkAVkGFvaGNqPy2DIvTqmUH_nk39o3z"
                    }}
                  />
                </div>
                <hr />
              </React.Fragment>
            )}
          </div>
        </CartWrapper>
      );
    }
    
    export default App;

    More custom usage

    Setup

    import { CartWrapper, CartButton, CartListing } from "react-easy-cart"

    Example

    NB: make sure the application is wrapped up with the CartWrapper component

    NB: CartWrapper cartShow prop must be set to false e.g cartShow={false}

    import React from "react";
    import { CartWrapper, CartButton, CartListing } from "reacteasycart"
    
    function App() {
    
      const containerStyles =
      {
        display: "flex",
        justifyContent: "space-between",
        marginLeft: "50px",
        marginRight: "50px",
        marginTop: "50px"
      }
    
      const productButtonStyles =
      {
        width: '10%',
        marginRight: "50px"
      }
    
      const products = [
        { id: 1, name: 'yogurt', price: 6000, description: "amazing product for cooking faster" },
        { id: 2, name: 'milk', price: 12000, description: "amazing product for cooking faster" },
      ]
    
      const continueToCheckout = (checkoutDetails) => {
        console.log(checkoutDetails)
      }
    
      return (
        <CartWrapper cartShow={false}>
    
        <div style={{ ...containerStyles }}>
          <div style={{ ...productButtonStyles }}>
            {products.map((product, index) =>
              <React.Fragment key={index}>
                <div>
                  <b>{product.name}</b>
                  <p>{product.price}</p>
                  <CartButton
                    product={{
                      name: product.name,
                      id: product.id,
                      price: product.price,
                      description: product.description,
                      quantity: 1
                    }}
                  />
                </div>
                <hr />
              </React.Fragment>
            )}
          </div>
    
          <CartListing continueToCheckout={continueToCheckout} currencySign="$" />
        </div>
    
         </CartWrapper>
      );
    }
    
    export default App;
    

    Imports.

    Components Details Pros
    CartButton integrated as the product button isIncrementAndDecrementBtn, buttonStyle, buttonClass, product
    CartListing Contains the cart content cartDetailsBtnClass, isDescription, description, isCartLogo, continueToCheckout, currencySign,
    TotalItemsInCart Independently imports total number of items in the cart isCartLogo

    Customization

    Adding custom styles and classes

    1. CartButton

    i) Use buttonStyle and buttonClass props and specify the target button to add custom styles and classes respectively

    Example:

      <CartButton
        buttonStyle={{
          addToCart: { backgroundColor: '#00b0ff' },
          increment: { backgroundColor: 'purple' },
          decrement: { backgroundColor: 'green' }
        }}
        buttonClass={{
          addToCart: "bg__bg_Red",
          increment: "bg__bg_Red",
          decrement: "bg__bg_Red"
        }}

    ii) To disable the decrement and increment buttons on the CartButton use isIncrementAndDecrementBtn prop

      <CartButton
        isIncrementAndDecrementBtn={false}

    1. CartListing

    i) Use cartDetailsBtnClass props and specify the target button to add custom classes
      <CartListing
          cartDetailsBtnClass={{ increment: "int_acc" 
          }}
          isCartLogo={false}

    ii) Cart logo show/hide

      <CartListing
          isCartLogo={false}

    Install

    npm i react-easy-cart

    DownloadsWeekly Downloads

    8

    Version

    1.1.6

    License

    ISC

    Unpacked Size

    36.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • okumujustine