Basic usage

The only thing required to make the lib work is to wrap whole app with the SpinampProvider component. Once it's done, all hooks can be used in all children components.

import {SpinampProvider, useAllTracksQuery} from "@spinamp/spinamp-hooks";

function App() {
  return (
    // Wrap whole app with the SpinampProvider
    <SpinampProvider>
      <TracksList />
    </SpinampProvider>
  )
}

function TracksList() {
  const {tracks, isLoading, isError, refetch} = useAllTracksQuery();

  if (isLoading) {
    return <p>Loading!</p>;
  }
  
  if (isError) {
    return (
      <div>
        <p>Ups! Something went wrong</p>
        <button onPress={() => refetch()}>Try again</button>
      </div>
    );
  }
  
  return (
    <div>
      <p>All tracks list!</p>
      <ul>
        {tracks.map(track => (
          <li key={track.id}>{track.title}</li>
        ))}
      </ul>
    </div>
  );
}

render(<App />, document.getElementById('root'));

See the Hooks reference for all examples of hooks that can be used.