react-simplified-player v1.0.93

📦 Installation

using npm:

npm i react-simplified-player

using yarn:

yarn add react-simplified-player

🖼️ Screenshots

Desktop

Mobile

✨ Feature list

• Playlist
• Color Customize
• API props
• Typescript support

👀 Example

Live Demo:

https://react-simplified-player.netlify.app/

How things work

Source Code

📝 Usage

import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root") as HTMLElement
const root = ReactDOM.createRoot(rootElement);

import { ReactSimplifiedPlayer } from "react-simplified-player"

root.render(<ReactSimplifiedPlayer {...props} />);

📄 API

💡 Customizeble UI

• color
• showing queue

custom color

import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root") as HTMLElement
const root = ReactDOM.createRoot(rootElement);

import { ReactSimplifiedPlayer } from "react-simplified-player"

// 🟡
root.render(<ReactSimplifiedPlayer mainColor={"#fcba03"} {...props} />);

show queue

import ReactDOM from "react-dom/client";
const rootElement = document.getElementById("root") as HTMLElement
const root = ReactDOM.createRoot(rootElement);

import { ReactSimplifiedPlayer } from "react-simplified-player"

// 🟡
root.render(<ReactSimplifiedPlayer showQueue={true} {...props} />);

👨‍💻 Installation

git clone https://github.com/callmenikk/react-simplified-player.git
cd react-simplified-player

npm i
npm start

🟦Component Prop Types

interface PlayerProps {
	mainColor: string,
	queue?:boolean,
	song?: QueueType,
	defaultVolume?: number,
	showQueue?: boolean,
	onVolumeChange?: (volume: number) => void,
	onAudioPlay?: (currentSong: QueueType) => void
	onAudioPause?: (currentSong: QueueType) => void,
	onAudioEnded?: (currentSong: QueueType) => void,
	onForward?: (currentSong: QueueType) => void,
	onBack?: (currentSong: QueueType) => void
}

🎶🟦Song Type

interface QueueType {
	song_cover?: string;
	song_title?: string;
	id?: string
	song_artist?: string;
	url: string;
}

📄 License

MIT