open-index/open-npm huggingface dataset:
npm package: @simplero/svelte-font-select
Description: Install the dependencies...
Latest version: 0.1.12

# Get started
Install the dependencies...

```
yarn install
```
## Working on this app
(There's a Svelte for [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) which you might find helpful).

Start dev server by running

```
yarn dev
```

This should open up demo/simple.html. Any changes you make should be automatically reflected on this page.

## Using on the main [Simplero product](https://github.com/Simplero/Simplero):

Once you're done developing, you can just publish the package using `yarn publish` to npm. 

Make sure you are logged in using a user that has access to the @simplero organization on npm using `npm login`. 

You can either use the `owaissimplero` account in 1Password, or add your npmjs.com user to the simplero organization using the `owaissimplero` account in 1Password.

Once you've published a new version, simply go to the main simplero app's `package.json` and update the version there and run `yarn install` on the main simplero app, and that's it.
npm package: @simplersuite/wishlist-react
Description: React SDK for [SimplerSuite Wishlist](https://simplersuite.co) — add wishlist functionality to any headless Shopify storefront (Hydrogen, Next.js, Remix, Gatsby, etc.).
Latest version: 0.1.0

# @simplersuite/wishlist-react

React SDK for [SimplerSuite Wishlist](https://simplersuite.co) — add wishlist functionality to any headless Shopify storefront (Hydrogen, Next.js, Remix, Gatsby, etc.).

## Installation

```bash
npm install @simplersuite/wishlist-react
```

## Quick Start

```tsx
import { WishlistProvider, WishlistButton, WishlistGrid } from "@simplersuite/wishlist-react";

function App() {
  return (
    <WishlistProvider
      apiBase="https://your-headless-api-url.com"
      storefrontKey="sfk_..."
      customerToken={jwt} // optional — from server-side token exchange
    >
      <WishlistButton productId="123" />
      <WishlistGrid />
    </WishlistProvider>
  );
}
```

## Auth Modes

**Customer mode** — pass a JWT obtained via server-side token exchange (`POST /auth/token` with your API key + secret + customer ID):

```tsx
<WishlistProvider apiBase={apiBase} storefrontKey="sfk_..." customerToken={jwt} />
```

**Guest mode** — uses a storefront public key only. Guest IDs are managed automatically via localStorage:

```tsx
<WishlistProvider apiBase={apiBase} storefrontKey="sfk_..." />
```

When `customerToken` transitions from `undefined` to a value, guest items are automatically merged into the customer's wishlist.

## Hooks

| Hook | Returns |
|------|---------|
| `useWishlist()` | `{ items, loading, error, isGuest, count }` |
| `useWishlistActions()` | `{ addItem, removeItem, bulkRemove, refresh }` |
| `useWishlistShare()` | `{ createShareLink, shareUrl, loading }` |
| `useIsWishlisted(productId)` | `boolean` |

## Components

All components accept `className`, `style`, and a `children` render prop for full customization. Zero built-in CSS.

- `WishlistButton` — heart toggle for add/remove
- `WishlistGrid` — renders wishlist items in a CSS grid
- `WishlistItem` — single product card
- `WishlistCount` — displays the wishlist item count
- `WishlistShareButton` — generates and copies a share link

## Documentation

Full docs at [simplersuite.co/docs](https://simplersuite.co/docs).

## License

MIT