Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/myty/react-spotify-hooks
This is a work in progress React hooks library for using the Spotify Web Sdk. Currently there are two hooks: 'useSpotify' and 'usePlaylist'.
https://github.com/myty/react-spotify-hooks
react typescript
Last synced: 1 day ago
JSON representation
This is a work in progress React hooks library for using the Spotify Web Sdk. Currently there are two hooks: 'useSpotify' and 'usePlaylist'.
- Host: GitHub
- URL: https://github.com/myty/react-spotify-hooks
- Owner: myty
- License: mit
- Created: 2021-02-09T03:30:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-07-16T23:00:37.000Z (over 3 years ago)
- Last Synced: 2024-10-05T11:36:18.465Z (about 1 month ago)
- Topics: react, typescript
- Language: TypeScript
- Homepage:
- Size: 716 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
This is a work in progress React hooks library for using the Spotify Web Sdk. Currently there are 2 hooks: `useSpotify` and `usePlaylist`
## Installation
```bash
npm install react-spotify-hooks
```
or
```bash
yarn add react-spotify-hooks
```
## Getting Started
To build and run the example, you will first need to add `.env.local` to the example folder and add something like the following: `SPOTIFY_CLIENT_ID=abcdefghijklmnopqrstuvwxyz`. The spotify client id can be obtained from the Spotify developer dashboard when you create a new app: https://developer.spotify.com/dashboard.
Next, run `yarn` and finally `yarn start` from within the example folder.
## Example Usage
**SpotifyContextProvider**
```typescriptreact
const clientId = 'abcdefghijklmnopqrstuvwxyz';
const scope =
'user-read-private user-read-email playlist-read-private playlist-read-collaborative playlist-modify-public playlist-modify-private';
const App = () => {
const handleErrors = (error: any) => console.error(error);
return (
);
};
```
**usePlaylist**
```typescriptreact
function Playlist() {
const { id } = useParams<{ id: string }>();
const { playlist, loading, loadMoreTracks, hasMoreTracks } = usePlaylist({
id,
});
if (playlist?.id == null) {
return null;
}
const { url } =
playlist.images != null && playlist.images.length > 0
? playlist.images[0]
: new ImageRecord();
return (
<>
{playlist.name}
{playlist.totalTracks} songs
by {playlist.owner?.display_name}
Tracks
{playlist.tracks.map((item, index) => (
))}
{loading && }
>
);
}
```
**useMyPlaylists**
```typescriptreact
function MyPlaylists() {
const { playlists, loading, hasMore, loadMore } = useMyPlaylists();
useEffect(() => {
if (!loading && hasMore) {
loadMore();
}
}, [loading, loadMore, hasMore]);
return (
<>
My Playlists
{playlists.map(playlist => (
))}
>
);
}
```
**useSpotify**
```typescriptreact
function MyPlaylists() {
const { getCurrentUserPlaylists } = useSpotify();
const [playlists, setPlaylists] = useState([]);
const [nextPlaylistUrl, setNextPlaylistUrl] = useState();
const [loaded, setLoaded] = useState(false);
useEffect(() => {
if (loaded) {
return;
}
(async function getPlaylists() {
const playlistsResult = await getCurrentUserPlaylists(
nextPlaylistUrl
);
if (playlistsResult?.next == null) {
setLoaded(true);
}
setPlaylists(prev => [...prev, ...(playlistsResult?.items ?? [])]);
setNextPlaylistUrl(playlistsResult?.next ?? undefined);
})();
}, [nextPlaylistUrl]);
return (
<>
My Playlists
{playlists.map(playlist => (
))}
>
);
}
```