open-index/open-npm huggingface dataset:
npm package: @niftinessafoot/autocomplete
Description: React component providing selectable auto-fill dropdown under a text input.
Author: Matthew Smith @niftinessafoot
Latest version: 0.2.1

# AutoComplete

## Usage

```js
// Import the base module into your react app.
import AutoComplete from './AutoComplete';
// Import the optional base stylesheet.
import '@niftinessafoot/autocomplete/styles.css';

<AutoComplete title="Lunch" data={['one', 'two', 'three']} />;
```
npm package: @niftory/sdk
Description: Simple wrapper SDK for easily interacting with Niftory API
Author: Niftory
Latest version: 1.0.2

# Niftory SDK

Simple wrapper SDK for easily interacting with [Niftory API](https://docs.niftory.com/home/v/api/)

&nbsp;

# Getting Started

Follow the getting started [here](https://docs.niftory.com/home/v/api/getting-started/sdk-quickstart)

&nbsp;

# Serverside (Client Auth)

```
import { NiftoryClient } from "@niftory/sdk"


...

const client =
    new NiftoryClient({
      environmentName: process.env.ENVIRONMENT //testnet or mainnet,
      appId: process.env.CLIENT_ID,
      apiKey: process.env.API_KEY,
      clientSecret: process.env.CLIENT_SECRET,
    })

await client.createNiftoryWallet()

```

You can find an API reference of the available methods [here](http://sdk.niftory.com/)

# React (Token Auth)

## Setup provider

You need to wrap your entire app with a NiftoryProvider and pass in an instance of NiftoryClient as follows:

```
  import { NiftoryClient } from "@niftory/sdk"
  import { NiftoryProvider } from "@niftory/sdk/react"


  // _app.tsx
  const authToken = "YOUR_AUTH_TOKEN"
  const client = useMemo(() => {
    return new NiftoryClient({
      appId: process.env.NEXT_PUBLIC_CLIENT_ID,
      environmentName: process.env.NEXT_PUBLIC_ENV,
      apiKey: process.env.NEXT_PUBLIC_API_KEY,
      authToken,
    })
  }, [authToken])

  return (
    <NiftoryProvider client={client}>
     ....
    </NiftoryProvider>)

```

**Important Note**: to use the react imports (providers and hooks) you need your `compilerOptions` in tsconfig moduleResolution to be set as `nodenext`

```
// tsconfig.json
{
  "compilerOptions": {
    ....

    "moduleResolution": "nodenext",
    ...
  },
  ...
}

```

## Calling api with React hooks

The hooks are urql generated hooks and are always named in the format use[[APIName]](https://graphql.docs.niftory.com/#group-Operations-Queries)Query for queries and use[[APIName]](https://graphql.docs.niftory.com/#group-Operations-Mutations)Mutation for mutations. For APIName you can view Niftory API docs [here](https://graphql.docs.niftory.com/).

Example:

```
import { useWalletQuery, useRegisterWalletMutation, useNiftoryClient } from "@niftory/sdk/react"

const MyComponent = () => {
  // Query
  const [userWalletResponse, reExecuteQuery] = useWalletQuery()
  // Mutation
  const [{ data, fetching }, registerWallet] = useRegisterWalletMutation()
  // Use client directly
  const niftoryClient = useNiftoryClient()

  if (userWalletResponse.fetching) {
    return <div>...Loading</div>
  }

  const { wallet } = userWalletResponse.data

  return (
    <>
      {wallet && <p>Your wallet address is {wallet.address}</p>}{" "}
      {<button onClick={() => registerWallet({ address: "0x123456" })}>Register Wallet</button>}
    </>
  )
}

```