# Creating a Customizable NFT Component in React with Basement's APIs and UI Kit

By [Basement](https://paragraph.com/@basement-2) · 2022-12-05

---

Today we are releasing our free UI kit for NFT display components. These components allow you to easily display and showcase NFT collections in a visually appealing way. This UI kit contains many variations, allowing builders to easily customize it to their needs.

[**Get the UI Kit here →**](https://www.figma.com/community/file/1181600288311016616)

![Basement's customizable component in action! ](https://storage.googleapis.com/papyrus_images/e3e06990d0a5dcb104ea365138dc858eb8dfb1b029f63249e7ce6ea2d6297037.gif)

Basement's customizable component in action!

In this post, we'll show you how to use the Basement SDK to build a customizable NFT display component in React. [To get started, use our starter template on CodeSandbox](https://codesandbox.io/s/basement-nft-react-component-starter-rt0ciw), this template does not contain any real world data yet. In this post we’ll help you fetch up-to-date data about the token’s name, image and owner.

Let’s import the BasementSDK class from the @basementdev/sdk package and create a new instance. This instance can be used to fetch data from Basement’s API, completely for up to free up to 30 requests per minute.

[**Need more bandwidth? You can get an API key here →**](https://basement.dev/pricing)

    import { BasementSDK, NonFungibleToken } from "@basementdev/sdk";
    
    const sdk = new BasementSDK();
    

NFTs can be referenced by their smart contract address, where the token’s code is hosted, and its specific token ID, referencing a piece of metadata defined by the creators.

To get the information from an NFT, we use the `token` function, passing in the contract and token ID for this NFT. The `include` option allows you to specify which data to return. In this case, we want to get the token's owner, their ENS reverse record, and the token's media.

[**You can read more about the various options in the SDK docs →**](https://docs.basement.dev/sdk)

    const getToken = (contract: string, id: string) => {
      return sdk.token({
        contract,
        tokenId: id,
        include: {
          owner: {
            reverseProfile: true
          },
          media: true
        }
      }) as any;
    };
    

Now that we have our `getToken` function set up, we can use it to fetch data about the NFT in our component. We will use the `useEffect` hook to call `getToken` when the `contract` and `id` props change, updating our `token` state variable with the latest data about this NFT.

    ...
    
    export const TokenComponent: React.FC<TokenComponentProps> = (props) => {
      const { contract, id } = props;
      const [token, setToken] = useState<NonFungibleToken>();
    
        useEffect(() => {
        getToken(contract, id).then((token: NonFungibleToken) => {
          setToken(token);
        });
      }, [contract, id, setToken]);
    

If the token is found, the `token` state now contains information about the image, owner and name of this token. All that’s left is adding these values to the pre-existing layout in the starter template, and you should have a beautiful component, ready to go!

    return (
      <Frame>
        <Image src={token.image?.largeUrl || ""} />
        <TitleContainer>
          <Title>{token.name || "Unnamed Token"}</Title>
          <Title style={{ fontWeight: "normal" }}>
            {token.owner?.reverseProfile?.name || token.owner?.address}
          </Title>
        </TitleContainer>
      </Frame>
    );
    

![The finished product – an NFT component in React.](https://storage.googleapis.com/papyrus_images/0a1e6f61fca87e93876f44e9028b500f3145b889d6fbd3b5247e486d9f9045f7.png)

The finished product – an NFT component in React.

> _💡 We’re assuming a name and image exist for this NFT component. However, NFT metadata standards are loosely defined, so the provided data may be incomplete or incorrect. We will do our best to provide a complete set of data, but some may be missing._
> 
> [_If it looks like metadata is missing, or outdated, you can request an update using the_](https://docs.basement.dev/sdk#nonfungibletokenrefresh) `nonFungibleTokenRefresh` _function._

You can now use this component in your react app:

        <TokenComponent
          contract={"0x5180db8f5c931aae63c74266b211f580155ecac8"}
          id={"243"}
        />
    

Further reading
---------------

Congrats! You now have an NFT component to show off your latest sweep on your website, or to get started with your next big web3 app.

The UI Kit and this code is free to use for everyone. Feel free to dive deeper and build upon the many variations. We’re super excited to see what everyone builds with these basics, please don’t forget to share them with us in our builders community on [Discord](https://discord.com/invite/rr5R7UYvGC), or on twitter [@basementapp\_xyz](https://twitter.com/basementapp_xyz) 🚀

*   [Check out the end result on CodeSandbox →](https://codesandbox.io/s/basement-nft-react-component-end-result-hqsgec?file=/src/App.tsx)
    
*   [Want to display a list of NFTs? Build a TokenListComponent using the](https://docs.basement.dev/sdk#tokens) `tokens` query in the SDK →
    
*   [Check out the many variation in the NFT component in our Figma template. →](https://www.figma.com/community/file/1181600288311016616)

---

*Originally published on [Basement](https://paragraph.com/@basement-2/creating-a-customizable-nft-component-in-react-with-basement-s-apis-and-ui-kit)*