{"id":13630362,"url":"https://github.com/idanlo/react-spotify-api","last_synced_at":"2025-04-17T13:32:12.890Z","repository":{"id":48271975,"uuid":"150483316","full_name":"idanlo/react-spotify-api","owner":"idanlo","description":"A React component library that makes it easier to interact with the Spotify API","archived":false,"fork":false,"pushed_at":"2022-11-23T21:35:12.000Z","size":8124,"stargazers_count":279,"open_issues_count":34,"forks_count":16,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-07T09:04:37.153Z","etag":null,"topics":["react","react-spotify","spotify-api","spotify-library","spotify-web-api"],"latest_commit_sha":null,"homepage":"https://idanlo.github.io/react-spotify-api/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/idanlo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-26T20:02:59.000Z","updated_at":"2025-01-20T19:10:11.000Z","dependencies_parsed_at":"2022-09-16T18:12:03.888Z","dependency_job_id":null,"html_url":"https://github.com/idanlo/react-spotify-api","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idanlo%2Freact-spotify-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idanlo%2Freact-spotify-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idanlo%2Freact-spotify-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idanlo%2Freact-spotify-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idanlo","download_url":"https://codeload.github.com/idanlo/react-spotify-api/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249344843,"owners_count":21254748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-spotify","spotify-api","spotify-library","spotify-web-api"],"created_at":"2024-08-01T22:01:40.048Z","updated_at":"2025-04-17T13:32:12.562Z","avatar_url":"https://github.com/idanlo.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-spotify-api\n\nA component library that helps you interact with the Spotify API\n\n# [Demo](https://react-spotify.netlify.com/browse/featured)\n\n[![NPM](https://img.shields.io/npm/v/react-spotify-api.svg)](https://www.npmjs.com/package/react-spotify-api)\n[![Build Status](https://travis-ci.com/idanlo/react-spotify-api.svg?branch=master)](https://travis-ci.com/idanlo/react-spotify-api)\n[![Dependencies](https://david-dm.org/idanlo/react-spotify-api/status.svg)](https://david-dm.org/idanlo/react-spotify-api)\n[![Dev Dependencies](https://david-dm.org/idanlo/react-spotify-api/dev-status.svg)](https://david-dm.org/idanlo/react-spotify-api?type=dev)\n[![Peer Dependencies](https://david-dm.org/idanlo/react-spotify-api/peer-status.svg)](https://david-dm.org/idanlo/react-spotify-api?type=peer)\n![Codecov](https://img.shields.io/codecov/c/github/idanlo/react-spotify-api.svg)\n[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/react-spotify-api.svg)](https://www.npmjs.com/package/react-spotify-api)\n[![GitHub](https://img.shields.io/github/license/idanlo/react-spotify-api.svg)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/prs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n# [Documentation](https://idanlo.github.io/react-spotify-api/)\n\n# Features\n\n- Components for most of Spotify's data types that pass data through render props\n- Hooks for most of Spotify's data\n\n# Roadmap\n\n- [x] Pass Spotify data with render props\n- [x] Use React.Context to pass the access token down the component tree\n- [x] Hooks!\n- [x] A demo page that uses this library - [available here!](https://react-spotify.netlify.com/browse/featured)\n- [x] Load more data support (infinite scrolling) - current works for some of the data types\n- [ ] TypeScript support!\n- [ ] 100% code coverage\n- [ ] Hooks for all data types from Spotify's API\n- [ ] Hooks for using the [Spotify Playback SDK](https://developer.spotify.com/documentation/web-playback-sdk)\n\n# Version 3.0.0 Breaking Change\n\nBefore version 3.0.0 the parameters to `props.children` were passed in this order - `data, loading, error`. It is now passed as an object, so you would now use the `Album` component like this -\n\n```jsx static\n\u003cAlbum id={...}\u003e\n  {({ data }) =\u003e {\n    return \u003c\u003e\u003c/\u003e;\n  }}\n\u003c/Album\u003e\n```\n\nAs opposed to the previous versions where you would use the components like this -\n\n```jsx static\n\u003cAlbum id={...}\u003e\n  {(data, loading, error) =\u003e {\n    return \u003c\u003e\u003c/\u003e;\n  }}\n\u003c/Album\u003e\n```\n\nThis way you can choose which parameters you would like to have, and if you want just the error parameter you can omit the other two. This works well with the `loadMoreData` parameter, you don't need to write all 4 parameters if you just need some of them.\n\n# Installing\n\n## with npm\n\n```bash\nnpm install --save react-spotify-api\n```\n\n## with yarn\n\n```bash\nyarn add react-spotify-api\n```\n\n## Wrapping your app with a Provider\n\nin order to use the Spotify API you are required to send an access token ([read more here](https://developer.spotify.com/documentation/general/guides/authorization-guide/))\nwith every single http request, but the `SpotifyApiContext` provider does that for you!\n\n### Import\n\n```js static\nimport { SpotifyApiContext } from 'react-spotify-api';\n```\n\n### Wrap your app with it (all react-spotify-api components must have a SpotifyApiContext.Provider parent)\n\n```jsx static\n\u003cSpotifyApiContext.Provider value={token}\u003e\n  \u003cApp /\u003e\n\u003c/SpotifyApiContext.Provider\u003e\n```\n\nYou can now use all components without worrying about getting your access token!\n\n## Component usage\n\n```jsx\nimport React, { Component } from 'react';\n\nimport { SpotifyApiContext, Artist } from 'react-spotify-api';\n\nfunction Example(props) {\n  return (\n    \u003cSpotifyApiContext.Provider value={props.token}\u003e\n      \u003cArtist id={props.id}\u003e\n        {({ data, loading, error }) =\u003e\n          data ? (\n            \u003cdiv\u003e\n              \u003ch1\u003e{data.name}\u003c/h1\u003e\n              \u003cul\u003e\n                {data.genres.map(genre =\u003e (\n                  \u003cli key={genre}\u003e{genre}\u003c/li\u003e\n                ))}\n              \u003c/ul\u003e\n            \u003c/div\u003e\n          ) : null\n        }\n      \u003c/Artist\u003e\n    \u003c/SpotifyApiContext.Provider\u003e\n  );\n}\n```\n\n## Hooks usage _(assuming the ExampleHooks component is wrapped with the SpotifyApiContext.Provider)_\n\n```jsx\nimport React from 'react';\n\nimport { useArtist } from 'react-spotify-api';\n\nfunction ExampleHooks(props) {\n  const { data, loading, error } = useArtist(props.id);\n\n  return artist ? (\n    \u003cdiv\u003e\n      \u003ch1\u003e{artist.name}\u003c/h1\u003e\n      \u003cul\u003e\n        {artist.genres.map(genre =\u003e (\n          \u003cli key={genre}\u003e{genre}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  ) : null;\n}\n```\n\n## Data types\n\n- data - Each component has a link to the Spotify API endpoint where you can see the data model for that specific data type\n- loading - Boolean (_true_ when loading and _false_ when finished loading)\n- error - _null_ when there are no errors but an _object_ when there are - usually containing the error object received by the `fetch` api, so it looks something like: `{status: 404, message: \"Not Found\"}`\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details\n\nMIT © [idanlo](https://github.com/idanlo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidanlo%2Freact-spotify-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidanlo%2Freact-spotify-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidanlo%2Freact-spotify-api/lists"}