# @jup-ag/react-hook

The react hook to connect integrate Jupiter.

# Installation

Yarn
```
yarn add @jup-ag/react-hook
```

NPM
```
npm install @jup-ag/react-hook
```

## Usage
At your App shell:
```tsx
import { JupiterProvider } from '@jup-ag/react-hook';
import { Connection } from '@solana/web3.js';

const connection = new Connection('https://rpc.ankr.com/solana');

const App = ({ children }) => {
  const wallet = useWallet() // user wallet
  return (
    <JupiterProivder connection={connection} cluster="mainnet-beta" userPublicKey={wallet.publicKey}>
      {children}
    </JupiterProvider>
  )
}
```

```tsx
import { useJupiter } from '@jup-ag/raect-hook';

const SwapForm = () => {
  const jupiter = useJupiter({
    amount, // integer amount in term of input mint
    inputMint,
    outputMint,
    slippageBps,
    debounceTime, // debounce time before refresh
  })

  const {
    allTokenMints, // all the token mints that is possible to be input
    routeMap, // routeMap, same as the one in @jup-ag/core
    exchange, // exchange 
    refresh, // function to refresh rates
    lastRefreshTimestamp: lastRefreshTimestamp.current, // timestamp when the data was last returned
    loading, // loading states
    routes, // all the routes from inputMint to outputMint
    error,
  } = jupiter
}
```

## Example repo
https://github.com/ZhengYuTay/create-dapp-solana-nextjs