New
Storybook for full-stack developersAutomate with Chromatic
Star75,299
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Addon Spotify
Add Spotify to the Storybook panel
npm install storybook-spotify
Last updated 10 months ago
1
Downloads per week
Readme View on GitHub

Storybook Addon Spotify

The Storybook Addon Spotify is used to easily embed a Spotify iframe to display any of all available types of Spotify content, as a playlist, an album, a song, a podcast or an episode within a Storybook panel.

Installation

npm install storybook-spotify --save-dev

Basic Setup

Add the following code in the main.js of your Storybook configuration:

module.exports = {
  addons: ['storybook-spotify'],
};

Set the parameters of your story with the key value version in order to provide the necessary information to be displayed.

Configuration

Property Required Type of Value Description Example
url string Spotify source https://open.spotify.com/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3

Implementation

export const parameters = {
  spotify: {
    url: 'https://open.spotify.com/embed/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3'
  }
}

Story Setup Example

Add the version parameter in the default Story configuration:

import React from 'react'

export default {
  title: 'Component Button',
  parameters: {
    spotify: {
      url: 'https://open.spotify.com/embed/playlist/4gV0IA40bGoAG1Rla7oZzQ?si=c9730ce8d8f349d3'
    }
  }
}

Examples

Playlist

Album

Song

Podcast

Episode

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI