Use Candymachine Hook

useCandymachine is a React Hook that provides a simple interface to interact with a Candy Machine. It accepts a Candymachine ID (address) and a Connection Object and then returns multiple functions and other state variables.

Features

• Fetching a Candymachine
• Fetching nfts that belong to a Candymachine
• Pagination when fetching nfts that belong to a Candymachine
• A mint function that can be directly called to mint a NFT
• Cleaner code, things are a little here and there now. Let me know (via an issue) if you have any suggestions. Maybe I am going to split the main hook into multiple ones (and then have a main one) but didn't decide upon that yet.

Usage

First install the package:

With NPM -

npm install use-candymachine

With Yarn -

yarn add use-candymachine

Simple Usage

import useCandymachine from "use-candymachine";
import { useEffect } from "react";

const Component = () => {
    const {
        page,
        nfts,
        candymachineMeta,
        isFetchingMetadata,
        isFetchingNFTs,
        initialFetch,
        nextPage,
        prevPage
    } = useCandymachine(
        connection, // solana connection object
        "AVSqKTyhvWB2gViNpaytGe3riRDjHGLEQ5q15JYKuHfT", // candy machine id
        4, // number of nfts to display per page
    );

    useEffect(() => {
        initialFetch();
    }, []);

    return (
         <div>
            {!candymachineMeta ? (
                <p>Fetching metadata</p>
            ) : (
                <p>Number of items: {candymachineMeta.items.length}</p>
            )}
            {!nfts ? (
                <p>Fetching NFTs</p>
            ) : (
                nfts.map((nft, index) => <p key={index}>{nft.name}</p>)
            )}

            <button onClick={() => prevPage()}>Previous Page</button>
            <p>Current page: {page}</p>
            <button onClick={() => nextPage()}>Next Page</button>
        </div>
    )
}

Minting an NFT

import useCandymachine from "use-candymachine";

const Component = () => {
    const {
        mint,
        isMinting,
    } = useCandymachine(
        connection, // solana connection object
        "AVSqKTyhvWB2gViNpaytGe3riRDjHGLEQ5q15JYKuHfT", // candy machine id
        4, // number of nfts to display per page
    );

    return (
		<div>
			<button
			onClick={async () => {
				const nft = await mint();
				console.log(nft);
			}}
			>
				Mint
			</button>
			{isMinting && <p>Minting...</p>}
		</div>
    )
}

Contributing

If you want to suggest a new feature, open a new issue with the feature request template. For bug reports, use the bug report issue template.

Hacktoberfest note: This project is participating in Hacktoberfest. You may work on any open issue or create a new issue along with a pr. If someone is already working on the issue, actively, please do not hijack it. You can however reques the issue to be re-assigned to you if here hasn't been any activity for a while.

To make a pr, fork the repository, clone it, create a new branch that describes the new feature or the bug it is fixing. Then make the required changes, commit them (we strongly recommend that you follow the Conventional Commits specification and gitmojis are welcome as well). The next step is to create a pull request and a maintainer will review it as soon as possible.

Contact

E-mail: contact@anishde.dev Twitter: @AnishDe12020