{"id":15857547,"url":"https://github.com/timmikeladze/use-spotify","last_synced_at":"2026-05-20T05:03:25.865Z","repository":{"id":57388398,"uuid":"338727361","full_name":"TimMikeladze/use-spotify","owner":"TimMikeladze","description":"React hooks for the Spotify Web Api. ","archived":false,"fork":false,"pushed_at":"2021-02-16T02:46:13.000Z","size":146,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T20:51:23.708Z","etag":null,"topics":["hooks","react","react-spotify-hook","spotify","spotify-api","spotify-hooks","spotify-react","spotify-web-api"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/TimMikeladze.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":"2021-02-14T04:18:40.000Z","updated_at":"2021-02-14T20:25:53.000Z","dependencies_parsed_at":"2022-09-09T18:12:54.210Z","dependency_job_id":null,"html_url":"https://github.com/TimMikeladze/use-spotify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fuse-spotify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fuse-spotify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fuse-spotify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimMikeladze%2Fuse-spotify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimMikeladze","download_url":"https://codeload.github.com/TimMikeladze/use-spotify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246703561,"owners_count":20820433,"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":["hooks","react","react-spotify-hook","spotify","spotify-api","spotify-hooks","spotify-react","spotify-web-api"],"created_at":"2024-10-05T20:24:06.532Z","updated_at":"2025-09-20T10:33:54.779Z","avatar_url":"https://github.com/TimMikeladze.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-spotify [![npm version](https://badge.fury.io/js/use-spotify.svg)](https://badge.fury.io/js/use-spotify) \n\nReact hooks for the Spotify Web API.\n\n## Installation\n\n```shell\nyarn add use-spotify\n\nnpm install use-spotify\n```\n\n## Usage\n\n1. Wrap your components with a `SpotifyApiProvider` and pass it a valid access token. Read the [Spotify Authorization Guide](https://developer.spotify.com/documentation/general/guides/authorization-guide/) for more details.\n2. Consume the `useSpotify` or `useSpotifyLazy` hooks.\n\n## API\n\nUnderneath the hood `use-spotify` utilizes [Spotify Web API JS](https://github.com/JMPerez/spotify-web-api-js).\n\n- The first parameter to the hooks is any spotify method name. \n- The second parameter is options.\n- The third parameter is a list of arguments specific to the spotify method. \n\nFurther documentation for each method and its arguments can be found at the [Spotify Web API JS](https://jmperezperez.com/spotify-web-api-js/) documentation or in the [Spotify Web API Reference](https://developer.spotify.com/documentation/web-api/reference/).\n\n```typescript\nconst result = useSpotify(spotifyMethod, options, ...args)\n\nconst [invoke, result] = useSpotifyLazy(spotifyMethod, options, ...args)\n\nawait invoke()\n\nawait invoke(overrideOption, ...overrideArgs)\n```\n\n## Examples \n\n### Provider\n\n```typescript jsx\nimport { useSpotify, SpotifyApiProvider } from 'use-spotify';\n\nconst App = () =\u003e {\n    return (\n        \u003cSpotifyApiProvider accessToken={'token goes here'}\u003e\n            \u003cMyTopArtists/\u003e\n            \u003cSearch /\u003e\n        \u003c/SpotifyApiProvider\u003e\n    );\n};\n```\n\n### Simple hook usage\n\n```typescript jsx\nimport { useSpotify } from 'use-spotify';\n\nconst MyTopArtists = () =\u003e {\n    const myTopArtists = useSpotify('getMyTopArtists');\n    \n    if (myTopArtists.loading) {\n        return 'Loading';\n    }\n    \n    return myTopArtists.data.artists.items.map(x =\u003e (\n        \u003cdiv key={x.id}\u003e\n            {x.name}\n        \u003c/div\u003e\n    ))\n}\n```\n\n### Passing arguments to a hook\n\n\n```typescript jsx\nimport { useSpotify } from 'use-spotify';\n\nconst Search = () =\u003e {\n    const search = useSpotify(\n        'search',\n        {\n            limit: 5,\n        },\n        'The National',\n        ['artist', 'album']\n    );\n\n    if (search.loading) {\n        return 'Loading';\n    }\n\n    return search.data.artists.items.map(x =\u003e (\n        \u003cdiv key={x.id}\u003e\n            {x.name}\n        \u003c/div\u003e\n    ))\n}\n```\n\n### Passing arguments to a lazy hook\n\n```typescript jsx\nimport { useSpotifyLazy } from 'use-spotify';\n\nconst SearchLazy = () =\u003e {\n    const [search, results] = useSpotifyLazy(\n        'search',\n    );\n\n    useEffect(() =\u003e {\n        (async () =\u003e {\n            const searchResults = await search(\n                {\n                    limit: 5,\n                },\n                'The National',\n                ['artist', 'album']\n            );\n        })()\n    }, [])\n    \n    if (results.loading) {\n        return 'Loading';\n    }\n\n    return results.data.artists.items.map(x =\u003e (\n        \u003cdiv key={x.id}\u003e\n            {x.name}\n        \u003c/div\u003e\n    ))\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmikeladze%2Fuse-spotify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimmikeladze%2Fuse-spotify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmikeladze%2Fuse-spotify/lists"}