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