npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mixtape-search

v1.0.2

Published

NFT searchbard for nft-fetcher

Downloads

17

Readme

MixtapeSearch

MixtapeSearch is a React component that provides a search bar for fetching and displaying NFTs from different networks. It uses the nft-fetcher library to fetch NFTs based on the user's search input.

Quick Start Method

The quickest way to get started is to use the nextjs mixtape-search-template repository.

git clone https://github.com/Zerobeings/mixtape-search-template.git
cd mixtape-search-template
yarn install

Installation

yarn add mixtape-search

mixtape-search has two peer dependencies: react and react-dom. Make sure they are installed in your project.

yarn add react react-dom

Usage

Create a component in your project and import the MixtapeSearch component from the mixtape-search package.

import MixtapeSearch from "mixtape-search"
import { useState, useEffect, useCallback } from "react";

export default function MixtapeSearchPackNOSSR(){
  const [fetchedNFTs, setFetchedNFTs] = useState<any[]>([]);

  const handleNFTsFetched = useCallback((nfts: any[]) => {
      setLoading(true);
      setFetchedNFTs(nfts);
      setInterval(() => {
          setLoading(false);
      }, 1000);
}, [setLoading, setFetchedNFTs]);

  return (
    <div>
      <MixtapeSearch 
        activeNetwork={"ethereum"}
        theme={"dark"}
        onNFTsFetched={handleNFTsFetched}
        />
    </div>
  )
}

Next, dynamically import the MixtapeSearchPackNOSSR component in your page.

import dynamic from "next/dynamic";
const MixtapeSearchPackNOSSR = dynamic(() => import('../components/MixtapeSearch/Searcher'), { ssr: false });

export default function Home() {
  return (
    <div>
      <MixtapeSearchPackNOSSR />
    </div>
  )
}

Props

  • activeNetwork: The active blockchain network. Default is 'ethereum'.
  • limit: The maximum number of NFTs to fetch.
  • start: The starting index for fetching NFTs.
  • where: An array of conditions for fetching NFTs.
  • select: The fields to select from the fetched NFTs.
  • dbURL: The URL of the database to fetch NFTs from.
  • theme: The theme of the search bar. Can be 'dark' or 'light'.
  • onNFTsFetched: A callback function that is called when NFTs are fetched. It receives the fetched NFTs as an argument.
  • style: An object containing CSS styles for various elements of the search bar.
  • classNames: An object containing class names for various elements of the search bar.

Styles and ClassNames

You can customize the appearance of the search bar by providing CSS styles and class names for various elements. The style prop is an object where the keys are the names of the elements and the values are CSS style objects. The classNames prop is similar, but the values are class names.

Here's an example of how you can use the style and classNames props to customize the appearance of the MixtapeSearch component:

import MixtapeSearch from 'mixtape-search';

<MixtapeSearch
  activeNetwork={"ethereum"}
  limit={10}
  start={0}
  theme={"dark"} // or "light"
  onNFTsFetched={(nfts) => console.log(nfts)}
  style={{
    searchContainer: {
      backgroundColor: '#f5f5f5',
      padding: '10px',
    },
    searchInput: {
      fontSize: '18px',
      padding: '10px',
    },
    searchButton: {
      backgroundColor: '#007bff',
      color: 'white',
      padding: '10px 20px',
    },
    resultsContainer: {
      marginTop: '20px',
    },
    resultItem: {
      borderBottom: '1px solid #ddd',
      padding: '10px 0',
    },
  }}
  classNames={{
    searchContainer: 'my-search-container',
    searchInput: 'my-search-input',
    searchButton: 'my-search-button',
    resultsContainer: 'my-results-container',
    resultItem: 'my-result-item',
  }}
/>

In this example, the style prop is used to provide CSS styles for the search container, search input, search button, results container, and result items. The classNames prop is used to provide custom class names for the same elements.

Please note that the actual style and class names that you can use will depend on the implementation of the MixtapeSearch component. The keys used in the style and classNames objects (like searchContainer, searchInput, etc.) are just examples and might not correspond to the actual elements in the MixtapeSearch component. You'll need to refer to the MixtapeSearch documentation or source code to find out the correct keys to use.

Fetching NFTs

When the user types in the search bar, the component fetches NFTs that match the user's input. The fetched NFTs are passed to the onNFTsFetched callback function.

Suggestions are displayed in a dropdown menu below the search bar. The user can click on a suggestion to select it. When a suggestion is selected, the onNFTsFetched callback function is called with the selected NFTs as an argument.

A contract address can also be entered in the search bar. When a contract address is entered, the component fetches all the NFTs from that contract and passes them to the onNFTsFetched callback function.

If a collection does not appear it has not been indexed yet. To request a collection to be indexed, please submit a request at https://indexer.locatia.app. Once the collection is indexed it will also appear in the suggestions dropdown.

Network Support

The component supports multiple blockchain networks. The active network can be set using the activeNetwork prop. The default network is 'ethereum'.

The following networks are supported:

  • Ethereum: "ethereum"
  • Polygon: "polygon"
  • Arbitrum One: "arbitrum"
  • Fantom Opera: "fantom"
  • Avalanche: "avalanche"

Next js configuration

Step 1: Update next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  basePath: "",
  webpack5: true,
  webpack: config => {
    config.resolve.fallback = {
      fs: false,
    };
    return config;
  }
};

module.exports = nextConfig;

Step 2: Under the public folder create a folder named db and add the sql-wasm-595817d88d82727f463bc4b73e0a64cf.wasm file to it. You can download the file from here or in the src file of this package.

Step 3: Create an mixtape-search.d.ts file under the typings folder of your project and the following declaration.

declare module 'mixtape-search';

License

MIT