@khalypso/use-spotify

Typed clients over Spotify API with react hooks.

Report Bug · Request Feature

About The Project

A simple way to use the Spotify web API with typed responses and variables thanks to TypeScript.

Each API can be used directly or throught hooks, the last one handling the need to update the access token when needed.

It relies on Axios to perform the requests.

(back to top)

Built With

• React
• Axios
• TypeScript

(back to top)

Getting Started

You can easily add the package on your project to start using it

Prerequisites

yarn add axios

Installation

yarn add @khalypso/use-spotify

(back to top)

Usage

You can use each API without the need to go throught hooks.

You will have to handle by yourself the renewal of each client when the access token won't be usable anymore.

import { createSpotifyClient, AlbumsApi } from "@khalypso/use-spotify";

const spotifyClient = createSpotifyClient("YOUR-TOKEN");

const albumsApi = AlbumsApi.fromClient(spotifyClient);

const album = await albumsApi.getAlbum({ id: "4aawyAB9vmqN3uQ7FjRGTy" });

Throught the hooks, the renewal of each client is done behind the hood.

import { FC, useEffect, useMemo, useState } from "react";
import { SpotifyApiProvider, useAlbumsApi } from "@khalypso/use-spotify";

const SaveAlbumButton: FC<{ id: string }> = (id) => {
  const albumsApi = useAlbumsApi();
  return (
    <button
      onclick={() => {
        albumsApi.saveAlbums([id]);
      }}
    >
      Save
    </button>
  );
};

const HomePage: FC = () => (
  <SpotifyApiProvider accessToken={"YOUR-TOKEN"}>
    <SaveAlbumButton id={"4aawyAB9vmqN3uQ7FjRGTy"} />
  </SpotifyApiProvider>
);

Be aware that you might want to use a library as react-query to perform the request by itself and only use the data.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

Project Link: https://github.com/mathieukh/use-spotify

(back to top)