@atomic-solutions/react-woocommerce

React Query hooks and provider for WooCommerce Store API

React integration layer for @atomic-solutions/woocommerce-utils. Provides React Query hooks and context provider for building WooCommerce storefronts in React and React Native.

Installation

pnpm add @atomic-solutions/react-woocommerce

Peer Dependencies

pnpm add @atomic-solutions/woocommerce-utils @tanstack/react-query react

Quick Start

1. Create Client

import { createClient } from '@atomic-solutions/woocommerce-utils';

const client = createClient({
  baseURL: 'https://your-store.com/wp-json',
  cartHeaders: {
    get: async () => ({
      nonce: await AsyncStorage.getItem('woo_nonce'),
      cartToken: await AsyncStorage.getItem('woo_cart_token'),
    }),
    save: async ({ nonce, cartToken }) => {
      if (nonce) await AsyncStorage.setItem('woo_nonce', nonce);
      if (cartToken) await AsyncStorage.setItem('woo_cart_token', cartToken);
    },
    clear: async () => {
      await AsyncStorage.removeItem('woo_nonce');
      await AsyncStorage.removeItem('woo_cart_token');
    },
  },
});

2. Setup Provider

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WooCommerceProvider } from '@atomic-solutions/react-woocommerce';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <WooCommerceProvider client={client}>
        <YourApp />
      </WooCommerceProvider>
    </QueryClientProvider>
  );
}

3. Use Hooks

import { useProducts, useAddToCart } from '@atomic-solutions/react-woocommerce';

function ProductList() {
  const { data: products, isLoading } = useProducts({
    per_page: 20,
  });

  const addToCart = useAddToCart();

  if (isLoading) return <Loading />;

  return (
    <FlatList
      data={products}
      renderItem={({ item }) => (
        <ProductCard
          product={item}
          onAddToCart={() =>
            addToCart.mutate({
              id: item.id,
              quantity: 1,
            })
          }
        />
      )}
    />
  );
}

Available Hooks

Products

• useProducts(params) - List products
• useInfiniteProducts(params) - Infinite scroll products
• useProduct(id) - Single product
• useProductCategories() - List categories
• useProductCategoryTree() - Hierarchical category tree

Cart

• useCart() - Get cart
• useAddToCart() - Add item to cart
• useUpdateCartItem() - Update cart item quantity
• useRemoveFromCart() - Remove item from cart
• useApplyCoupon() - Apply coupon code
• useRemoveCoupon() - Remove coupon
• useUpdateCustomer() - Update customer info
• useSelectShippingRate() - Select shipping method

Checkout

• useCheckout() - Get checkout data
• useProcessCheckout() - Process order

Orders

• useOrder(id) - Get order by ID

License

MIT © Atomic Solutions