Common UI

Common UI components for cross-platform React development.

Purpose

This library provides reusable UI components that work consistently across web and mobile platforms, including quantity controls, price displays, and other common e-commerce UI elements. These components are designed to work seamlessly with the Haus Storefront Components system and support both web and native platforms through a unified API.

Features

Quantity controls: Increment/decrement buttons with customizable min/max values and step size
Price display: Formatted price rendering with currency support, tax display, and price ranges
Cross-platform: Works on both web and native platforms through unified primitives
Compound components: Flexible composition patterns with asChild support
Accessibility: Built-in ARIA attributes and semantic HTML

Installation

npm
Yarn

npm install @haus-storefront-react/common-ui

yarn add @haus-storefront-react/common-ui

Note: This is not a public package. Contact the Haus Tech Team for access.

API Reference

Price

A compound component for displaying formatted prices with currency support, tax handling, and price range support. Automatically handles price formatting based on SDK features like pricesIncludeTax and showDecimals.

Sub-components:

Price.Root - Root container that manages price context and tax logic
Price.From - Renders "From" prefix when price is a range
Price.Amount - Displays the formatted price amount
Price.Currency - Displays the currency code or custom currency symbol

Props

Prop	Type	Required	Default	Description
`price`	`Price`	Yes	-	Price value (number or object with min/max)
`priceWithTax`	`Price`	Yes	-	Price value with tax included
`currencyCode`	`CurrencyCode`	Yes	-	Currency code for formatting
`withTax`	`boolean`	No	-	Override SDK setting for whether to show tax-inclusive price
`decimals`	`boolean`	No	-	Override SDK setting for whether to show decimal places
`asChild`	`boolean`	No	`false`	Use asChild pattern to merge props with child component
`children`	`React.ReactNode`	No	-	Child components (sub-components)

For Price.From, Price.Amount, and Price.Currency:

Sub-component	Props	Required	Default	Description
`Price.From`	`AsChildProps`	No	-	Inherits asChild behavior
`Price.Amount`	`AsChildProps` & `withCurrency?: boolean`	No	-	Inherits asChild behavior
`Price.Currency`	`AsChildProps`	No	-	Inherits asChild behavior

QuantityButtons

A compound component for quantity control with increment and decrement buttons. Supports customizable min/max values, step size, and flexible composition through sub-components.

Sub-components:

QuantityButtons.Root - Root container component that manages quantity state
QuantityButtons.Increment - Button to increase quantity
QuantityButtons.Decrement - Button to decrease quantity
QuantityButtons.Input - Input field for direct quantity entry

Props

Prop	Type	Required	Default	Description
`value`	`number`	Yes	-	Current quantity value
`onValueChange`	`(value: number) => void`	Yes	-	Callback function called when quantity changes
`min`	`number`	No	`0`	Minimum allowed quantity
`max`	`number`	No	-	Maximum allowed quantity (unlimited if not specified)
`step`	`number`	No	`1`	Step size for increment/decrement operations
`children`	`React.ReactNode`	No	-	Child components (sub-components)

For QuantityButtons.Increment, QuantityButtons.Decrement, and QuantityButtons.Input props:

Sub-component	Props	Required	Default	Description
`QuantityButtons.Increment`	`AsChildProps & WebButtonProps`	No	-	Inherits asChild behavior and standard web button props
`QuantityButtons.Decrement`	`AsChildProps & WebButtonProps`	No	-	Same as increment but wired to decrease the quantity
`QuantityButtons.Input`	`WebInputProps`	No	-	Standard web input props for direct quantity entry

useQuantityButtonsProps

Provides quantity management logic including increment, decrement, and input handling. Returns helper functions for getting props that can be applied to button and input components.

Parameters

Parameter	Type	Required	Default	Description
`value`	`number`	Yes	-	Current quantity value
`onValueChange`	`(value: number) => void`	Yes	-	Callback function called when quantity changes
`min`	`number`	No	`0`	Minimum allowed quantity
`max`	`number`	No	-	Maximum allowed quantity (unlimited if not specified)
`step`	`number`	No	`1`	Step size for increment/decrement operations

Returns

Return Value	Type	Description
`value`	`number`	Current internal quantity value
`increment`	`() => void`	Function to increment quantity by step
`decrement`	`() => void`	Function to decrement quantity by step
`getDecrementProps`	`(props?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>) => ButtonHTMLAttributes<HTMLButtonElement>`	Function to get props for decrement button with proper disabled state
`getIncrementProps`	`(props?: Partial<ButtonHTMLAttributes<HTMLButtonElement>>) => ButtonHTMLAttributes<HTMLButtonElement>`	Function to get props for increment button with proper disabled state
`getInputProps`	`(props?: Partial<InputHTMLAttributes<HTMLInputElement>>) => InputHTMLAttributes<HTMLInputElement>`	Function to get props for input with validation and ARIA attributes

Basic Usage

Quantity Buttons

React
React Native

import { useState } from 'react'
import { QuantityButtons } from '@haus-storefront-react/common-ui'

function MyComponent() {
  const [quantity, setQuantity] = useState(1)

  return (
    <QuantityButtons.Root
      value={quantity}
      onValueChange={setQuantity}
      min={0}
      max={10}
    >
      <QuantityButtons.Decrement>-</QuantityButtons.Decrement>
      <QuantityButtons.Input />
      <QuantityButtons.Increment>+</QuantityButtons.Increment>
    </QuantityButtons.Root>
  )
}

import { useState } from 'react'
import { QuantityButtons } from '@haus-storefront-react/common-ui'

function MyComponent() {
  const [quantity, setQuantity] = useState(1)

  return (
    <QuantityButtons.Root
      value={quantity}
      onValueChange={setQuantity}
      min={0}
      max={10}
    >
      <QuantityButtons.Decrement>-</QuantityButtons.Decrement>
      <QuantityButtons.Input />
      <QuantityButtons.Increment>+</QuantityButtons.Increment>
    </QuantityButtons.Root>
  )
}

Price Display

React
React Native

import { Price } from '@haus-storefront-react/common-ui'

function ProductPrice({ product }) {
  return (
    <Price.Root
      price={product.price}
      priceWithTax={product.priceWithTax}
      currencyCode={product.currencyCode}
    >
      <Price.Amount withCurrency/>
    </Price.Root>
  )
}

import { Price } from '@haus-storefront-react/common-ui'

function ProductPrice({ product }) {
  return (
    <Price.Root
      price={product.price}
      priceWithTax={product.priceWithTax}
      currencyCode={product.currencyCode}
    >
      <Price.Amount withCurrency/>
    </Price.Root>
  )
}

Advanced Usage

Using Hook for Custom Implementation

React
React Native

import { useQuantityButtonsProps } from '@haus-storefront-react/common-ui'

function CustomQuantityControl({ value, onValueChange, min, max }) {
  const {
    increment,
    decrement,
    getIncrementProps,
    getDecrementProps,
    getInputProps,
  } = useQuantityButtonsProps({
    value,
    onValueChange,
    min,
    max,
    step: 1,
  })

  return (
    <div className='custom-quantity'>
      <button {...getDecrementProps({ className: 'decrement-btn' })}>−</button>
      <input {...getInputProps({ className: 'quantity-input' })} />
      <button {...getIncrementProps({ className: 'increment-btn' })}>+</button>
    </div>
  )
}

import { View, TextInput, Pressable, Text } from 'react-native'
import { useQuantityButtonsProps } from '@haus-storefront-react/common-ui'

function CustomQuantityControl({ value, onValueChange, min, max }) {
  const {
      increment,
      decrement,
      getDecrementProps,
      getIncrementProps,
      getInputProps
    } = useQuantityButtonsProps({
      value,
      onValueChange,
      min,
      max,
      step: 1,
    })

  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
      <Pressable {...getDecrementProps()}>
        <Text>−</Text>
      </Pressable>
      <TextInput
        {...getInputProps()}
        keyboardType='number-pad'
      />
      <Pressable {...getIncrementProps()}>
        <Text>+</Text>
      </Pressable>
    </View>
  )
}

Integration with Cart Component

React
React Native

import { Cart } from '@haus-storefront-react/cart'
import { QuantityButtons, Price } from '@haus-storefront-react/common-ui'

function CartItem({ orderLine }) {
  return (
    <Cart.Item orderLine={orderLine}>
      <Cart.Item.Image />
      <Cart.Item.Price asChild>
        <Price.Root
          price={orderLine.unitPrice}
          priceWithTax={orderLine.unitPriceWithTax}
          currencyCode={orderLine.currencyCode}
        >
          <Price.Amount withCurrency/>
        </Price.Root>
      </Cart.Item.Price>
      <Cart.Item.Quantity asChild>
        <QuantityButtons.Root
          value={orderLine.quantity}
          onValueChange={(qty) => adjustQuantity(orderLine.id, qty)}
        >
          <QuantityButtons.Decrement>-</QuantityButtons.Decrement>
          <QuantityButtons.Input />
          <QuantityButtons.Increment>+</QuantityButtons.Increment>
        </QuantityButtons.Root>
      </Cart.Item.Quantity>
    </Cart.Item>
  )
}

import { Cart } from '@haus-storefront-react/cart'
import { QuantityButtons, Price } from '@haus-storefront-react/common-ui'

function CartItem({ orderLine }) {
  return (
    <Cart.Item orderLine={orderLine}>
      <Cart.Item.Image />
      <Cart.Item.Price asChild>
        <Price.Root
          price={orderLine.unitPrice}
          priceWithTax={orderLine.unitPriceWithTax}
          currencyCode={orderLine.currencyCode}
        >
          <Price.Amount withCurrency/>
        </Price.Root>
      </Cart.Item.Price>
      <Cart.Item.Quantity asChild>
        <QuantityButtons.Root
          value={orderLine.quantity}
          onValueChange={(qty) => adjustQuantity(orderLine.id, qty)}
        >
          <QuantityButtons.Decrement>-</QuantityButtons.Decrement>
          <QuantityButtons.Input />
          <QuantityButtons.Increment>+</QuantityButtons.Increment>
        </QuantityButtons.Root>
      </Cart.Item.Quantity>
    </Cart.Item>
  )
}

Made with ❤️ by Haus Tech Team

Purpose​

Features​

Installation​

API Reference​

Price​

QuantityButtons​

useQuantityButtonsProps​

Basic Usage​

Quantity Buttons​

Price Display​

Advanced Usage​

Using Hook for Custom Implementation​

Integration with Cart Component​