Cart Quantity

A quantity picker for a cart line. At one, the minus becomes a bin so the same tap removes the item instead of going to zero. The number pops when it changes and the plus dims at the limit. Each button names the item it changes, and the new quantity is announced. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add cart-quantity

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/cart-quantity.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { CartQuantity } from "@/components/ui/cart-quantity";

export default function Example() {
  const [qty, setQty] = useState(1);

  return (
    <CartQuantity label="Linen shirt" value={qty} onChange={setQty} onRemove={() => setQty(0)} />
  );
}

Props