react-soundcloud-embed-widget v1.0.0

REACT COMPONENT SOUNDCLOUD WIDGET

React component to embed a full customizable soundcloud widget

INSTALLATION

npm i react-component-soundcloud-widget --save\ or \ yarn add react-component-soundcloud-widget --save

USAGE

import { SoundcloudWidget } from 'react-component-soundcloud-widget';

export default function Home(props) {
    const STYLES = {
        border: '1px',
        borderRadius: '2rem'
    }

  return (
    <>
       <SoundcloudWidget
            song_id={'604411074'}
            style={STYLES}
            height={'133px'}
            width={'100%'}
            auto_play={true}
            color={'F26F23'}
            buying={true}
            sharing={true}
            download={true}
            show_artwork={true}
            show_playcount={true}
            show_user={true}
            start_track={null} 
            single_active={true}
       />
    </>
  )
}

OPTIONS (PROPS)

song_id (String): Soundcloud song id -> see here for instructions on locating the song id: https://developers.soundcloud.com/docs/api#follow \ \ style (Object): CSS Styles - must be in in-line styling format, ex: {border: '1px', borderRadius: '2rem'}\ \ height (String): Height in px, rem, or percentage, ex: '133px'\ \ width (String): Width in px, rem, or percentage, ex:'100%'\ \ auto_play (Boolean): Song autoplays when component loads, default: true\ \ color (HEX code): Widget color theme, ex: 'F26F23'\ \ buying (Boolean): Displays buy button, default: true\ \ sharing (Boolean): Displays share button, default: true\ \ download (Boolean): Displays download button, default: true\ \ show_artwork (Boolean): Displays song artwork, default: true\ \ show_playcount (Boolean): Displays song playcount, default: true\ \ show_user (Boolean): Displays user, default: true\ \ start_track (Number): A number from 0 to the playlist length which reselects the track in a playlist, default: null\ \ single_active (Boolean): If set to false the multiple players on the page won’t toggle each other off when playing, default: true