Mantle App API React Client and Components

A react interface for interacting with the Mantle App API.

Installation

You can install the Mantle react package using npm:

``bash
$ npm install @heymantle/react
`

Usage

Include the MantleProvider react context somewhere near the root of your component tree, after you have access to your customer / shop data, you'll need the stored Mantle customer token from the identify request you did server-side. For example:

`js
import { MantleProvider } from "@heymantle/react";

const App = (Component) => {
const [shop, setShop] = useState();

const fetchShop = async () => {
const response = await fetch('/api/shop');
setShop(await response.json());
}

useEffect(() => {
fetchShop();
}, [])

if (!shop) {
return ;
}

ReactDOM.render(


appId={process.env.MANTLE_APP_ID}
customerApiToken={shop.mantleApiToken}
apiUrl={process.env.MANTLE_API_URL}
>



,
document.getElementById("app-container")
);
};
`

Furthur down the stack you can then use the useMantle hook for most data and operations, for example:

`js
import { useMantle } from "@heymantle/react";

const HomePage = () => {
const { customer, subscription, plans, subscribe, cancelSubscription, sendUsageEvent } = useMantle();

useEffect(() => {
sendUsageEvent({
eventName: 'page_view',
properties: {
path: window.location.href,
},
});
}, [window.location]);

return (