Surfacing customer data

Once you've got your backend operations set up, you'll need to surface this data in your app's frontend. Mantle provides several approaches for this, from direct API access to ready-made React components.

Integration options

You have multiple ways to access and display Mantle data in your application:

Direct API access

For non-React applications or backend integrations:

• Use MantleClient for a JavaScript wrapper around HTTP requests
• Make raw HTTP requests directly to the Mantle API

React integration

If you're using React, our libraries make integration seamless:

Core components

These handle the foundational tasks of accessing and managing Mantle data in your React app:

• MantleProvider makes data available throughout your app
• useMantle() hook provides access to customer data, plans, and actions

UI components

Ready-to-use components from our @heymantle/polaris library for common app needs:

• Plan selection components
• Shopify App Bridge integration

Choosing your approach

Your integration approach will depend on your specific requirements and framework preferences:

For non-React applications

Direct API integration:

• Use MantleClient from our JavaScript library or make direct HTTP requests
• Implement your own UI and state management
• Best for custom tech stacks, backend integrations, or frameworks other than React

For React applications

Option 1: Core data components only

• Use MantleProvider and useMantle() hook for data access
• Build your own custom UI components
• Best for apps with unique interfaces that still want simplified data management

Option 2: Pre-built UI components

• Use our ready-made UI components like PlanCardStack from @heymantle/polaris
• Best for quickly implementing common features like plan selection and subscription flows

For all applications (React and non-React)

Shopify App Bridge integration

• Leverage our Shopify App Bridge utilities for handling redirects and external actions
• Works seamlessly with both React and non-React applications
• Essential for embedded Shopify apps that need to perform external redirects

Data flow

Here's how Mantle data flows through your frontend when using our React integration:

1. MantleProvider wraps your app, connecting to backend data
2. Core components access this data via useMantle()
3. UI components automatically use this same data flow
4. Your custom components can tap in wherever needed

The key is that all data access is centralized through your chosen integration approach, ensuring consistency across your app.

Want to get started? Check out our MantleClient documentation for direct API access or our MantleProvider guide for React integration.