# React

URL: https://docs.blux.cc/react

Integrate Blux into your React or Next.js application.

The `@bluxcc/react` package provides a React-first integration with built-in hooks and components, compatible with any React-based framework including Next.js, Vite, and Create React App.

**Requirements:** React 17 or higher.

## Installation

Install the Blux React SDK using your package manager of choice:

<Tabs items={['npm', 'pnpm', 'yarn']} defaultIndex={0}>
  <Tab value="npm">
```bash
    npm install @bluxcc/react
```
  </Tab>
  <Tab value="pnpm">
```bash
    pnpm add @bluxcc/react
```
  </Tab>
  <Tab value="yarn">
```bash
    yarn add @bluxcc/react
```
  </Tab>
</Tabs>

## Setup

Wrap your app with `BluxProvider` to give any component access to the Blux SDK. Place it as close to the root of your application as possible. The only required option is `appId`. Leave out `networks` and the app uses Mainnet. Leave out `appName` and Blux uses `"App"`.

<Tabs items={['Next.js', 'Vite / CRA']} defaultIndex={0}>
  <Tab value="Next.js">
```tsx
    "use client";

    import { BluxProvider } from "@bluxcc/react";

    export default function Providers({ children }: { children: React.ReactNode }) {
      return (
        <BluxProvider
          config={{
            appId: "your-app-id",
          }}
        >
          {children}
        </BluxProvider>
      );
    }
```
  </Tab>
  <Tab value="Vite / CRA">
```tsx
    import React from "react";
    import ReactDOM from "react-dom/client";
    import { BluxProvider } from "@bluxcc/react";
    import App from "./App";

    const root = ReactDOM.createRoot(document.getElementById("root")!);

    root.render(
      <React.StrictMode>
        <BluxProvider
          config={{
            appId: "your-app-id",
          }}
        >
          <App />
        </BluxProvider>
      </React.StrictMode>,
    );
```
  </Tab>
</Tabs>

## Use it

Call `useBlux` from any child of `BluxProvider` to open the built-in modals.

```tsx

function ConnectButton() {
  const { login, isAuthenticated } = useBlux();

  return (
    <button onClick={login}>
      {isAuthenticated ? "Connected" : "Connect"}
    </button>
  );
}
```

<Cards>
  {getPageTreePeers(source.getPageTree(), '/react').map((peer) => (
    <Card key={peer.url} title={peer.name} href={peer.url}>
      {peer.description}
    </Card>
  ))}
</Cards>