# core-react

{% hint style="success" %}
Fully compatible with  [React v18](https://18.react.dev/) and offers complete support for [TypeScript](https://www.typescriptlang.org/)
{% endhint %}

<figure><img src="/files/EFCE0asfxswKvA4Lah8V" alt="react logo"><figcaption></figcaption></figure>

### Install

Install by package manager, install the [paytweed/core-react](https://www.npmjs.com/package/@paytweed/core-react) from the [npm public registry](https://www.npmjs.com/).

```bash
npm i @paytweed/core-js
```

{% embed url="<https://www.npmjs.com/package/@paytweed/core-react>" %}

### Setup

{% hint style="info" %}
Ensure you have an application set up on the tweed [dashboard](https://dashboard.paytweed.com/)
{% endhint %}

### Tweed Provider

Use the Tweed provider as a context for your React app. Wrap your application with the Tweed provider to enable access to the Tweed hook throughout your project. Make sure to pass the Tweed provider your applicationId and the list of chains you will be using in your project.

<details>

<summary>&#x3C;TweedProvider></summary>

```tsx
import { Network, TweedProvider } from "@paytweed/core-react";

function App() {
  return (
    <>
      <TweedProvider
        applicationId="YOUR_APP_ID"
          options={{
          chains: [Network.POLYGON, Network.ETHEREUM]
          }}
      >
        <HomePage />
      </TweedProvider>
```

***

**Hook parameters**

* [**applicationId**](#user-content-fn-1)[^1] <mark style="color:red;">REQUIRED</mark> <mark style="color:blue;">string</mark>
* **options** optional <mark style="color:blue;">object</mark>\
  &#x20;  [**chains**](#user-content-fn-2)[^2] optional <mark style="color:blue;">array</mark> \
  &#x20;  [**mode**](#user-content-fn-3)[^3] optional <mark style="color:blue;">string</mark>\
  &#x20;  [**rpcMap**](#user-content-fn-4)[^4] optional <mark style="color:blue;">object</mark>

</details>

### Hooks

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>useAuth</strong></td><td>Manage user authentication with functions such as <code>connect</code>, <code>logout</code>, and retrieve access token.</td><td><a href="/pages/YRaoFN3YiRW7YBOPVLAe">/pages/YRaoFN3YiRW7YBOPVLAe</a></td><td></td><td><a href="/pages/YRaoFN3YiRW7YBOPVLAe">/pages/YRaoFN3YiRW7YBOPVLAe</a></td></tr><tr><td><strong>useTweed</strong></td><td>Manage your Tweed SDK integration using the <code>useTweed</code> hook, which includes the <code>setPaletteMode</code> function and the SDK's <code>loading</code> state.</td><td><a href="/pages/t3PbMyOwm3kODaspsyS4">/pages/t3PbMyOwm3kODaspsyS4</a></td><td></td><td><a href="/pages/t3PbMyOwm3kODaspsyS4">/pages/t3PbMyOwm3kODaspsyS4</a></td></tr><tr><td><strong>useWeb3</strong></td><td>This hook is your gateway to the Web3 world. Use it to obtain the <code>ethereumProvider</code> and begin interacting with the blockchain, such as signing transactions.</td><td><a href="/pages/NbpazCmQl8ijZY6qm8cg">/pages/NbpazCmQl8ijZY6qm8cg</a></td><td></td><td><a href="/pages/NbpazCmQl8ijZY6qm8cg">/pages/NbpazCmQl8ijZY6qm8cg</a></td></tr></tbody></table>

[^1]: Your application-id

[^2]: Use the `Network` enum to set the chains you want to use in your application.

[^3]: choose between light and dark appearance use the `PaletteMode` type

[^4]: in case you want to use a different RPC


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paytweed.com/developer-tools/tweed-sdks/core-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.