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:
npm install @bluxcc/react pnpm add @bluxcc/react yarn add @bluxcc/reactSetup
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".
"use client";
import { BluxProvider } from "@bluxcc/react";
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<BluxProvider
config={{
appId: "your-app-id",
}}
>
{children}
</BluxProvider>
);
} 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>,
);Use it
Call useBlux from any child of BluxProvider to open the built-in modals.
import { useBlux } from "@bluxcc/react";
function ConnectButton() {
const { login, isAuthenticated } = useBlux();
return (
<button onClick={login}>
{isAuthenticated ? "Connected" : "Connect"}
</button>
);
}