# 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="https://2034179314-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgQyCg5IN7Cv6AnUUpGl2%2Fuploads%2FBIBflD18cvvFiaXObRxq%2Freact.png?alt=media&#x26;token=f3a244a6-bfa9-41a2-bd3b-b45f0723c325" 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="core-react/useauth">useauth</a></td><td></td><td><a href="core-react/useauth">useauth</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="core-react/usetweed">usetweed</a></td><td></td><td><a href="core-react/usetweed">usetweed</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="core-react/useweb3">useweb3</a></td><td></td><td><a href="core-react/useweb3">useweb3</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