@dctalbot/react-spinitron NPM

react-spinitron

This package is a Spinitron API client for React and React-Native applications.
It supports all Spinitron v2 API GET request endpoints.
It wraps @tanstack/react-query, and the documentation for that largely applies here too.

Installation

npm install @dctalbot/react-spinitron

Example

App.tsx

import { ApiClientProvider } from "@dctalbot/react-spinitron";
import { MyComponent } from "./MyComponent";

const API_BASE_URL = "https://my-spinitron-proxy.com/api";

function App() {
  return (
    <ApiClientProvider baseURL={API_BASE_URL}>
      <MyComponent />
    </ApiClientProvider>
  );
}

MyComponent.tsx

import { useSpins } from "@dctalbot/react-spinitron";

export function MyComponent() {
  // GET Spins for Playlist #123 every 10 seconds
  const { data, error, isFetching } = useSpins(
    {
      playlist_id: 123,
      // start?: string;
      // end?: string;
      // show_id?: number;
      // count?: number;
      // page?: number;
      // fields?: string[];
      // expand?: string[];
    },
    { refetchInterval: 10000 },
  );

  const listdata = (data?.pages ?? []).map((page) => page.items).flat();

  if (error) return <div>Error</div>;
  if (isFetching) return <div>Loading...</div>;

  return (
    <div>
      {listdata.map((spin) => (
        <p key={spin.id}>
          {spin.song} by {spin.artist}
        </p>
      ))}
    </div>
  );
}

Hooks include: