open-index/open-npm huggingface dataset:
npm package: @heyma/delete-obj-undefined-keys
Description: A npm package to delete undefided keys
Author: heyma
Latest version: 1.0.0

# delete-obj-undefined-keys

A npm package to delete undefided keys

### Installation

``` bash
$ npm i @heyma/delete-obj-undefined-keys
```

### Quick Start

``` jsx
const { deleteUndefinedKeys } = require("@heyma/delete-obj-undefined-keys")

const obj = {
  a1: undefined,
  a2: 2,
  a3: 3,
  a4: undefined
}

const result = deleteUndefinedKeys(obj)

/**
 * result = {
 *   a2: 2,
 *   a3: 3
 * }
 * /
```
npm package: @heymantle/app-bridge-react
Description: React hooks and utilities for Mantle App Bridge integration
Latest version: 1.1.8

# @heymantle/app-bridge-react

React hooks and utilities for Mantle App Bridge integration.

## Installation

```bash
npm install @heymantle/app-bridge-react
```

## Usage

### 1. Load the App Bridge script

```html
<script src="https://app.heymantle.com/app-bridge.js" async></script>
```

### 2. Use the hooks

```tsx
import { useAppBridge, useUser, useOrganization } from '@heymantle/app-bridge-react';

function MyComponent() {
  const { mantle, isReady, isConnecting, error } = useAppBridge();
  const { user, isLoading: userLoading } = useUser();
  const { organization, isLoading: orgLoading } = useOrganization();

  if (isConnecting || userLoading || orgLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!isReady || !mantle) return <div>App Bridge not ready</div>;

  const handleFetch = async () => {
    const response = await mantle.authenticatedFetch('/api/some-endpoint');
    const data = await response.json();
    console.log(data);
  };

  return (
    <div>
      <h1>Welcome, {user?.name}!</h1>
      <p>Organization: {organization?.name}</p>
      <button onClick={() => mantle.showToast('Hello!', 'success')}>
        Show Toast
      </button>
      <button onClick={handleFetch}>Fetch Data</button>
    </div>
  );
}
```

## API Reference

### Hooks

- `useAppBridge()` - Returns the App Bridge instance and connection state
- `useUser()` - Returns user information from the App Bridge
- `useOrganization()` - Returns organization information from the App Bridge

Note: `authenticatedFetch` is available directly on the `mantle` instance returned from `useAppBridge()` when `isReady` is true.

### Utilities

- `getMantleAppBridge()` - Get the App Bridge instance
- `isRunningInIframe()` - Check if running in iframe
- `waitForMantleAppBridge()` - Wait for App Bridge to be available
- `isAppBridgeAvailable()` - Check if App Bridge is available
- `getAppBridgeConnectionStatus()` - Get connection status

### Types

```tsx
import type { 
  MantleAppBridge, 
  MantleOrganization, 
  MantleUser,
  MantleSession
} from '@heymantle/app-bridge-react';
```

## License

MIT
npm package: @heymantle/polaris
Description: Mantle's frontend component library
Author: Mantle
Latest version: 13.0.2


# Mantle App API React Client and Components

A [react](https://react.dev/) interface for interacting with the [Mantle](https://heymantle.com) App API and drop-in components for your billing UI.

## Installation

You can install the Mantle react package using npm:


```bash
$ npm install @heymantle/polaris
```

## 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 <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")
  );
};
```

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

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

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

  useEffect(() => {
    pushEvent({
      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>
      ) : (
        <HorizontalPlanCards
          customer={customer}
          plans={plans}
          onSubscribe={async ({ planId, discountId }) => {
            const subscription = await subscribe({ planId, discountId });
            open(subscription.confirmationUrl, "_top");
          }}
        />
      )}
    </div>
  )
};
```

## Documentation

Documentation is available at [https://heymantle.com/docs/surfacing-mantle-data](https://heymantle.com/docs/surfacing-mantle-data).