Components

React components you can drop into your web app with 1 line of code.

CometProvider

In order for the other components and hooks to work properly within your React application, you need to wrap your component tree with the CometProvider component. Doing so is simple; all you'll need is your Comet Publishable Key, obtainable at www.withcomet.com/devstart.

It is important that you add CometProvider to your app, otherwise other components and hooks will not work properly!

API

Prop	Type	Description
publishableKey	string	Required. Your Comet Publishable Key.
showFullWallet	boolean	If true (default), users will see a full Comet wallet + gallery when they log in. Otherwise, they'll see a minimal UI.

Example

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import { CometProvider } from '@comet-labs/react';

const cometProviderConfig = {
  publishableKey: '<PUBLISHABLE KEY>',
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <CometProvider config={cometProviderConfig}>
      <App />
    </CometProvider>
  </React.StrictMode>
);

LoginButton

A button that lets a user log in or sign up to Comet. When logged in, it shows the user's username and profile picture.

API

No props are required for LoginButton.

Example

App.jsx

import { LoginButton } from '@comet-labs/react';

function App() {
  return (
    <div className="App">
      <LoginButton />
    </div>
  );
}

The LoginButton when the user is not logged in.

When a user logs in, they'll be able to see their Comet account and the gallery of NFTs in their wallet. This will be shown if showFullWallet is set to true in the CometProvider component.

MintButton

A drop-in button that lets users mint an NFT that's been launched with Comet.

API

Prop	Type	Description
collectionId	string	Required. The ID of the Comet collection that can be minted with this MintButton.

Example

App.jsx

import { MintButton } from '@comet-labs/react';

function App() {
  return (
    <div className="App">
      <MintButton collectionId="<COLLECTION ID>" />
    </div>
  );
}

The MintButton displays the price and items remaining in the collection.

If the collection requires payment, clicking the MintButton will redirect the user to a credit card payment form.