react-fuse-link v0.0.2

React Fuse Link

React wrapper package for Fuse Link.

Use this guide to learn how to integrate Fuse Link into your React project.

Please note that we're constantly updating this project, so always be keen on updating this package to the newest release to stay up-to-date with new features.

Step 0: Installation

npm install --save-dev react-fuse-link

Step 1: Generating Fuse Link token

Recommended: call this API endpoint from your backend to keep your Fuse API key private.

$ curl "https://api.tryfuse.dev/v1/integrations/create-link-token" \
    -X POST \
    --data '{ "user_id": "{existing Fuse User ID OR null}" }' \ // Pass in your existing Fuse User ID to maintain state, or pass in nothing to create a new Fuse User
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer {FUSE_API_KEY}"

Step 2: Load + Display Fuse Link

import { useFuseLink } from "react-fuse-link";

export default function Page() => {
  const { open, close, isReady } = useFuseLink({
    linkToken: "[linkToken]",
    userId: localStorage.getItem("fuse_user_id"),
    apiUrl: "http://localhost:3002",
    cdnUrl: "http://localhost:8080"
  });

  ...
}

Example Integration

Backend (Node.js/Express)

app.get("/get-link-token", async (req, res) => {
  const user = req.user;
  const response = await axios.post("https://api.tryfuse.dev/v1/integrations/create-link-token", {
    user_id: user.fuse_user_id
  }, {
    headers: {
      "Authorization": "Bearer {FUSE_API_KEY}"
    }
  });
  const { link_token, user_id } = response.data;
  return res.status(200).send({ link_token, user_id });
});

Frontend (React)

import { useState, useEffect } from "react";
import { useFuseLink } from "react-fuse-link";

function App() {
  const [linkToken, setLinkToken] = useState();
  const [userId, setUserId] = useState();
  const apiKey = "smNTDwreGnc7mTG-YOr_Y0pV";

  const { open, close, isReady } = useFuseLink({
    linkToken,
    userId
  });

  useEffect(() => {
    fetch(`${BACKEND_URL}/get-link-token`, {
      method: "GET"
    })
      .then(res => res.json())
      .then(data => {
        const { link_token, user_id } = data;
        setLinkToken(link_token);
        setUserId(user_id);
      });
  }, []);
  
  return (
    <div>
      <h1>React Fuse Link Example</h1>
      <button onClick={open} disabled={!isReady}>Open Link</button>
    </div>
  );
}

export default App;