Spicetify Logo Spicetify
GitHub stars

ReactComponent

Spicetify provides a set of stock React components used by Spotify. You can use these components to create your own custom UI.

namespace ReactComponent {
    const ContextMenu: any;
    const RightClickMenu: any;
    const Menu: any;
    const MenuItem: any;
    const AlbumMenu: any;
    const PodcastShowMenu: any;
    const ArtistMenu: any;
    const PlaylistMenu: any;
    const TooltipWrapper: any;
    const IconComponent: any;
    const TextComponent: any;
    const ConfirmDialog: any;
    const PanelSkeleton: any;
    const PanelContent: any;
    const PanelHeader: any;
    const Toggle: any;
    const Slider: any
};

Components

ContextMenu

Generic context menu provider. It is used by Spotify on a variety of elements, such as right-click menu, dropdown menu, etc.

Props

See ContextMenuProps.

Example

// See Menu section for more details
const menuWrapper = React.memo((props: MenuProps) =>
    <Spicetify.ReactComponent.Menu {...props}>
        <Spicetify.ReactComponent.MenuItem
            label="Hello World"
            onClick={() => Spicetify.showNotification('Hello World')}
        />
    </Spicetify.ReactComponent.Menu>
});


const contextMenu = React.memo((props: ContextMenuProps) => {
    return (
        <Spicetify.ReactComponent.ContextMenu {...props}
            trigger="click"
            menu={<menuWrapper {...props} />}
        >
            <div>Click me</div>
        </Spicetify.ReactComponent.ContextMenu>
    );
});

RightClickMenu

Wrapper of ContextMenu with predefined props: action = 'toggle' and trigger = 'right-click'.

Props

See ContextMenuProps.

Example

const menuWrapper = React.memo((props: MenuProps) =>
    <Spicetify.ReactComponent.Menu {...props}>
        <Spicetify.ReactComponent.MenuItem
            label="Hello World"
            onClick={() => Spicetify.showNotification('Hello World')}
        />
    </Spicetify.ReactComponent.Menu>
});
// Same as ContextMenu example, but appears on right-click
const contextMenu = React.memo((props: ContextMenuProps) => {
    return (
        <Spicetify.ReactComponent.RightClickMenu {...props}
            menu={<menuWrapper {...props} />}
        >
            <div>Right-click me</div>
        </Spicetify.ReactComponent.RightClickMenu>
    );
});

Outer layer containing MenuItems.

Props

See MenuProps.

Example

const menuWrapper = React.memo((props: MenuProps) =>
    <Spicetify.ReactComponent.Menu {...props} onClose={() => Spicetify.showNotification('Menu closed')}>
        <Spicetify.ReactComponent.MenuItem
            label="Hello World"
            onClick={() => Spicetify.showNotification('Hello World')}
        />
    </Spicetify.ReactComponent.Menu>
});

Component to construct menu item. Used as Menu children.

Props

See MenuItemProps.

Example

const icon = React.memo((props: IconComponentProps) =>
    <Spicetify.ReactComponent.IconComponent {...props}
        semanticColor="textBase"
        dangerouslySetInnerHTML={{ __html: Spicetify.SVGIcons["play"] }}
        iconSize={16}
    />
);


const menuItem = React.memo((props: MenuItemProps) =>
    <Spicetify.ReactComponent.MenuItem {...props}
        onClick={() => Spicetify.showNotification('Hello World')}
        disabled={false}
        divider="after"
        {/* It is recommended that you use both `icon` and `trailingIcon` for compatibility between older versions */}
        icon={<icon />}
        trailingIcon={<icon />}
    >
        Hello World
    </Spicetify.ReactComponent.MenuItem>
);

AlbumMenu, PodcastShowMenu, ArtistMenu, PlaylistMenu

Tailored Menu for specific type of object.

Props

Accepts uri and onRemoveCallback props along with MenuProps.

interface AlbumMenuProps extends MenuProps {
    uri: string;
    onRemoveCallback?: (uri: string) => void;
};

Example

const currentAlbumURI = Spicetify.Player.data.item.metadata.album_uri;


const albumMenu = React.memo((props: AlbumMenuProps) =>
    <Spicetify.ReactComponent.AlbumMenu {...props}
        onClose={() => Spicetify.showNotification('Menu closed')}
        uri={currentAlbumURI}
    />
);

TooltipWrapper

Component to display tooltip when hovering over element. Useful for accessibility.

Props

See TooltipProps.

Example

const elementHasTooltip = React.memo((props: TooltipProps) =>
    <Spicetify.ReactComponent.TooltipWrapper {...props}
        label="Hello World"
        placement="bottom"
    >
        <div>Hover me</div>
    </Spicetify.ReactComponent.TooltipWrapper>
);

IconComponent

Component to render Spotify-style icon. It is used by Spotify on a variety of elements, such as buttons, icons, etc.

Props

See IconComponentProps.

Example

const icon = React.memo((props: IconComponentProps) =>
    <Spicetify.ReactComponent.IconComponent {...props}
        semanticColor="textBase"
        dangerouslySetInnerHTML={{ __html: Spicetify.SVGIcons["play"] }}
        iconSize={16}
    />
);

TextComponent

Component to render text. It is used by Spotify on a variety of elements, such as buttons, text, etc.

Props

See TextComponentProps.

Example

const text = React.memo((props: TextComponentProps) =>
    <Spicetify.ReactComponent.TextComponent {...props}
        semanticColor="textBase"
        variant="viola"
        weight="book"
    >
        Hello World
    </Spicetify.ReactComponent.TextComponent>
);

ConfirmDialog

Component to display Spotify-style confirmation dialog. Used by Spotify on playlist, track removal, etc.

Props

See ConfirmDialogProps.

Example

const ConfirmButton = () => {
    // Modal open state must be handled manually
    const [showModal, setShowModal] = React.useState(false);


    return (
        <Spicetify.ReactComponent.ConfirmDialog
            isOpen={showModal}
            onConfirm={() => {
                setShowModal(false);
                Spicetify.showNotification('Confirmed');
            }}
            onCancel={() => {
                setShowModal(false);
                Spicetify.showNotification('Cancelled');
            }}
            onOutsideClick={() => {
                setShowModal(false);
                Spicetify.showNotification('Clicked outside');
            }}
            titleText="Confirm Modal"
            descriptionText="Are you sure you want to confirm?"
            confirmText="Confirm"
            cancelText="Cancel"
        />
        <button onClick={() => setShowModal(true)}>Click me</button>
    );
}

Toggle

Component to display Spotify-style toggle. Used by Spotify on the settings page.

Props

See ToggleProps.

const Toggle = () => {
    const [enabled, setEnabled] = React.useState(false);


    return (
        <Spicetify.ReactComponent.Toggle
            value={enabled}
            onSelected={setEnabled}
            id="my-toggle-id"
            class="my-toggle-class"
        ></Spicetify.ReactComponent.Toggle>
    );
}

Slider

Component to render sliders. It is used by Spotify for the volume/playing bars and on the settings page.

Props

See SliderProps.

Example

const Slider = () => {
    const [value, setValue] = useState(0);


    return (
        <Spicetify.ReactComponent.Slider
            max={100}
            step={1}
            value={value}
            onDragStart={() => {}}
            onDragMove={setValue}
            onDragEnd={(value) => {console.log(`final value is ${value}`)}}
        ></Spicetify.ReactComponent.Slider>
    );
}

PanelSkeleton, PanelContent, PanelHeader

Components to render Spotify-style panel. Used by Spotify on their right sidebar panels (e.g. BuddyFeed, Now Playing, etc).

Refer to Panel.Components for more details.

Edit this page