ChangelogRequest a feature

React Quickstart

If you are developing an application with React, no matter which framework (Next.js, Remix, etc.) you're using, you can add NFTs with our library.

📦 Installation

Add the @center-inc/react client library to your project.

$ yarn add @center-inc/react

⚙️ Set up the <CenterProvider /> component

You should wrap your application with CenterProvider to be able to use NFT components and hooks as follows:

import { CenterProvider } from '@center-inc/react'

const Application = () => (
  return (
    <CenterProvider>
      {/* your application goes here */}
    </CenterProvider>
  )
)

You can configure the CenterProvider by passing in props, including:

  • network: The blockchain network on which you'd like to access NFTs.
  • mode: production or development.
  • apiKey: Your center API key.
<CenterProvider
  network="ethereum-mainnet"
  mode="production"
  apiKey="your_api_key"
/>

🖼 Access NFTs

Now, you're ready to use our components to render some NFTs! Here is a basic usage of the Asset component:

import { Asset } from '@center-inc/react'

const Page = () => (
  <Asset address="0xF4121a2880c225f90DC3B3466226908c9cB2b085" tokenId="3630" />
)