React

Family is built into ConnectKit. If you are using ConnectKit, you can skip this step.

If you're using React, integrating with ConnectKit is recommended. ConnectKit offers all of Family's functionality without requiring any extra code. If you're using a different framework, you can still use Family by following the steps below.

1. Install the SDK

Install the family package using your preferred package manager.

Terminal

npm i family

2. Wrap your app with the FamilyProvider

You can do this in your app's entry point (e.g., index.js).

,index.jsimport { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { FamilyAccountsProvider } from "family/react";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <FamilyAccountsProvider>
      <App />
    </FamilyAccountsProvider>
  </StrictMode>,
);

3. Connect to Family

Family exports an easy to use <ConnectButton /> component and useFamilyAccounts Hook that you can use to interact with Family.

,App.jsimport { useFamily, ConnectButton } from "family/react";

export default function App() {
  const family = useFamily();

  if (!family.isConnected) return <ConnectButton />;

  const client = family.client;
  const account = client?.account;

  return (
    <>
      <p>Connected to {account.address}</p>

      <button
        onClick={() => {
          client.switchAccounts();
        }}
      >
        Switch Wallets
      </button>

      <button
        onClick={() => {
          client.addChain({
            chain: ..., // add viem chain
          });
        }}
      >
        Add Chain
      </button>

      <button
        onClick={() => {
          client.signMessage({
            message: "Hello World",
          });
        }}
      >
        Sign Message
      </button>

      <button
        onClick={() => {
          client.disconnect();
        }}
      >
        Disconnect
      </button>
    </>
  );
}

That's it—you now have a simple component that displays the connected wallet's address and allows the user to switch wallets, add chains, sign messages, and disconnect. You can use the client object to interact with Family and perform any actions you need.