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.
"use client";
import { networks, BluxProvider } from "@bluxcc/react";
export default function Providers({ children }: { children: React.ReactNode }) {
return (
<BluxProvider
config={{
appName: "MyApp",
networks: [networks.testnet, networks.mainnet],
defaultNetwork: networks.mainnet,
}}
>
{children}
</BluxProvider>
);
} import React from "react";
import ReactDOM from "react-dom/client";
import { networks, BluxProvider } from "@bluxcc/react";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
<React.StrictMode>
<BluxProvider
config={{
appName: "MyApp",
networks: [networks.testnet, networks.mainnet],
defaultNetwork: networks.mainnet,
}}
>
<App />
</BluxProvider>
</React.StrictMode>,
);