Skip to main content

Common Questions

How do I get access to the packages?​

The Haus Storefront packages are available through a private npm registry. Contact the Haus Tech Team to get access credentials. Once you have access, configure your npm/yarn to authenticate with the registry.

What are the system requirements?​

  • Node.js: Version 18 or higher
  • React: Version 19 or higher
  • TypeScript: Recommended for type safety (optional but highly recommended)

How do I customize styling?​

All components are headless, so you control the styling. Use className, style, or the asChild prop to merge with your own components. See the asChild section under "Getting Started" for more details.

Can I use these components with React Native?​

Yes! The library is designed to work on both web and native platforms. Platform detection is automatic. On web, it uses localStorage for persistence, and on React Native, it uses AsyncStorage. You can also explicitly set the platform in the DataProvider if needed.

How do I configure the DataProvider?​

The DataProvider is the foundation of the ecosystem. Wrap your app with it and provide your backend configuration:

<DataProvider
  provider='vendure'
  platform='web' // optional, auto-detected if not specified
  options={{
    apiUrl: 'https://your-api.com/shop-api',
    vendureToken: 'YOUR_CHANNEL_TOKEN',
    locale: 'en',
    currency: 'USD',
    persistOptions: {
      enabled: true,
      maxAge: 3600000, // 1 hour
    },
  }}
>
  <YourApp />
</DataProvider>

See the Configuration Options section in Getting Started for all available options.

How do I handle errors?​

Most hooks and components provide error states. Check the individual library documentation for error handling patterns. Typically, you'll see patterns like:

const { data, isLoading, error } = useQuery({ ... })

if (error) {
  // Handle error
  return <div>Error: {error.message}</div>
}

Can I use only specific components?​

Yes! Install only the packages you need. Each component library is independent (though some may depend on core or common libraries). For example, if you only need cart functionality, you can install just @haus-storefront-react/cart along with the required @haus-storefront-react/core package.

How do I use TypeScript with these libraries?​

All packages are written in TypeScript and include full type definitions. Simply install the packages and TypeScript will automatically pick up the types. Make sure you have @haus-storefront-react/shared-types installed for shared type definitions.

How do I work with different currencies and locales?​

Configure currency and locale in the DataProvider options:

<DataProvider
  provider="vendure"
  options={{
    apiUrl: '...',
    locale: 'sv', // Swedish
    currency: 'SEK',
    autoSetLocaleFromDocument: true // Auto-detect from HTML lang attribute
  }}
>

You can also use the enabledFeatures.customPriceCurrency option for custom currency handling.

How do I persist state?​

Enable state persistence in the DataProvider options:

<DataProvider
  options={{
    persistOptions: {
      enabled: true,
      maxAge: 3600000, // Cache expires after 1 hour
      storage: customStorage // Optional: provide custom storage implementation
    }
  }}
>

On web, it uses localStorage by default. On React Native, it uses AsyncStorage.

How do I use custom interceptors?​

You can customize request and response handling using interceptor strategies:

<DataProvider
  options={{
    requestInterceptorStrategy: (config, defaultHandler) => {
      // Add custom headers, modify request, etc.
      config.headers['X-Custom-Header'] = 'value'
      return defaultHandler(config)
    },
    responseInterceptorStrategy: (response, defaultHandler) => {
      // Handle responses, transform data, etc.
      return defaultHandler(response)
    }
  }}
>

What's the difference between using components vs hooks?​

Components are pre-built UI elements that include both the logic and the HTML structure. For example, <Cart> renders a cart with buttons, item lists, and totals already structured for you. You style them with CSS, but the component handles the layout and structure.

Hooks are functions that return data and functions only—no UI. For example, useCart() gives you cart data and functions like addItem() or removeItem(), but you build the entire UI yourself.

When to use each:

  • Use components when you want a quick start and are okay with the provided structure (which you'll style yourself).
  • Use hooks when you need complete control over the HTML structure and layout.

You can mix and match both approaches in the same application.

How do I extend functionality?​

You can extend the SDK with custom methods, create custom plugin configs, or compose components to build more complex features. See the Advanced Usage documentation for detailed guides on:

  • SDK extensions
  • Plugin strategies

How do I integrate with Next.js or other frameworks?​

The libraries work with any React-based framework. For Next.js specifically:

  1. Wrap your app (or specific pages) with the DataProvider in _app.js or layout components
  2. Use Server Components where possible for better performance
  3. Configure environment variables for API URLs and tokens

The components are framework-agnostic and work with Create React App, Vite, Next.js, Remix, and others.

How do I debug issues?​

  1. Check the browser console for error messages
  2. Use React DevTools to inspect component state
  3. Enable query client devtools (if using React Query devtools)
  4. Check network requests to verify API calls are being made correctly
  5. Review the SDK instance using useSdk() hook to inspect configuration

For more help, contact the Haus Tech Team.

Can I use these with other commerce platforms besides Vendure?​

Currently, Vendure is the primary supported provider. However, the architecture supports multiple providers. Contact the Haus Tech Team if you need integration with other platforms like Shopify, CommerceTools, or custom backends.

Need Help?​

  • Documentation: Browse the component and library documentation
  • Contact: Reach out to the Haus Tech Team for access, support, or questions
  • Philosophy: Learn more about our approach in the Introduction
Last updated on