🔥Camp Network SDK

Welcome to the CampNetwork SDK documentation!

The campnetwork SDK is designed to make integrating social media data directly into your applications as easy as possible. With this SDK, you can quickly access Spotify, Twitter, Tiktok, and other social media data through our APIs.

This guide will walk you through how to integrate the SDK with a sample component using Twitter data.

Modules

Core	React
@campnetwork/sdk TwitterAPI: Fetch user Twitter data. SpotifyAPI: Fetch user Spotify data. Auth: Authenticate users.	@campnetwork/sdk/react CampProvider and CampContext for React applications. @campnetwork/sdk/react/auth React components and hooks for authentication.

Installation

npm install @campnetwork/sdk

Importing Modules

CommonJS

const { TwitterAPI, SpotifyAPI, Auth } = require("@campnetwork/sdk");

ES6

import { TwitterAPI, SpotifyAPI, Auth } from "@campnetwork/sdk";

Authentication

• Auth: Authenticate users with methods like connect, disconnect, and getLinkedSocials.

• Use with wallet providers like MetaMask.

Social APIs

TwitterAPI

• Fetch user data, tweets, followers, and more.

• Example:

  const twitter = new TwitterAPI({ apiKey: "your-api-key" });
  const user = await twitter.fetchUserByUsername("jack");

SpotifyAPI

• Fetch saved tracks, played tracks, and playlists.

• Example:

  const spotify = new SpotifyAPI({ apiKey: "your-api-key" });
  const savedTracks = await spotify.fetchSavedTracksById("1234567890");

React Integration

Setup

• Wrap your app with CampProvider:

  import { CampProvider } from "@campnetwork/sdk/react";
  <CampProvider clientId="your-client-id">
    <App />
  </CampProvider>;

Authentication UI

• Use the CampModal component for a ready-made authentication interface:

  import { CampModal } from "@campnetwork/sdk/react/auth";
  <CampModal />;

Hooks

• useAuth: Access the Auth instance.

• useAuthState: Monitor authentication state.

• useSocials: Check linked social accounts.

• useProviders: Fetch available wallet providers.

Development

Building the SDK

npm install
npm run build

Link SDK Locally

npm link
# In your project:
npm link @campnetwork/sdk

For detailed examples and descriptions refer to README at https://github.com/campaign-layer/camp-sdk

import React, { useEffect } from "react";
import { useTwitter } from "@campnetwork/sdk";

const TwitterProfile = ({ apiKey, username }) => {
  const { loading, error, data, fetchUserByUsername } = useTwitter(apiKey);

  useEffect(() => {
    if (username) {
      fetchUserByUsername(username);
    }
  }, [username, fetchUserByUsername]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      {data ? (
        <div>
          <h2>{data.name}</h2>
          <p>@{data.username}</p>
          <p>{data.bio}</p>
        </div>
      ) : (
        <p>No user data</p>
      )}
    </div>
  );
};

export default TwitterProfile;