0.0.38 • Published 9 months ago

@heymantle/react v0.0.38

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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:

$ 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:

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 <Loading />;
  }

  ReactDOM.render(
    <BrowserRouter>
      <AppFrame host={host}>
        <MantleProvider
          appId={process.env.MANTLE_APP_ID}
          customerApiToken={shop.mantleApiToken}
          apiUrl={process.env.MANTLE_API_URL}
        >
          <Component />
        </MantleProvider>
      </AppFrame>
    </BrowserRouter>,
    document.getElementById("app-container")
  );
};

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

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 (
    <div>
      {customer.subscription ? (
        <div>
          <span>You're currently susbcribed to: {customer.subscription.plan.name}</span>
          <button
            onclick={async () => {
              await cancelSubscription();
            }}
          >
            Cancel subscription
          </button>
        </div>
      ) : (
        <div style={{ display: 'flex' }}>
        {plans.map((plan) => (
          <div>
            <span><strong>{plan.name}</strong></span>
            <span>${plan.amount}</span>
            <button
              onclick={async () => {
                const subscription = await subscribe({ planId: plan.id });
                open(subscription.confirmationUrl, "_top");
              }}
              Subscribe
            </button>
          </div>
        )}
      )}
    </div>
  )
};

This example uses a very simple and vanilla plan list rendering, check out our drop-in components for usable UI components.

Documentation

Documentation is available at https://heymantle.com/docs/surfacing-mantle-data.

0.0.38

9 months ago

0.0.37

9 months ago

0.0.35

10 months ago

0.0.36

10 months ago

0.0.20

1 year ago

0.0.21

1 year ago

0.0.22

1 year ago

0.0.23

1 year ago

0.0.24

1 year ago

0.0.25

1 year ago

0.0.30

11 months ago

0.0.31

10 months ago

0.0.32

10 months ago

0.0.33

10 months ago

0.0.34

10 months ago

0.0.26

11 months ago

0.0.27

11 months ago

0.0.28

11 months ago

0.0.29

11 months ago

0.0.19

1 year ago

0.0.17

1 year ago

0.0.18

1 year ago

0.0.16

1 year ago

0.0.11

1 year ago

0.0.12

1 year ago

0.0.13

1 year ago

0.0.14

1 year ago

0.0.15

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago