react-playify

First of all, I want to thank you all for choosing React Playify. React Playify is a lightweight and user-friendly media player built with React. Whether you're a developer looking to integrate a simple yet powerful media player into your React projects or a user seeking a hassle-free way to enjoy your music collection, React Playify offers a seamless solution. You can reach me [e-mail]

Features

• Lightweight
• Small size
• Accessible

Install

npm i react-playify

Quick Start

Don't forget to pass the audio array and the useState variables along with their respective set functions. Also, avoid setting the value to true initially. This is because the audio element can't be played until there is a DOM interaction by the user, as per the browser's rule, and we can't override this. If it seems confusing 😰😰, don't worry, it's simple.

❌ ❌ ❌ Don't set the value initially true ❌ ❌ ❌

  const [isPlaying, setIsPlaying] = useState(true)

✅ ✅ ✅Instead do this ✅ ✅ ✅

  const [isPlaying, setIsPlaying] = useState(false)

import { useState } from 'react'
import {Player} from 'react-playify'

function App() {
  const [isPlaying, setisPlaying] = useState(false)
  let musicArray = [
    {title:'Song 1',subtitle:'Song sub',audio:'song1.mp3',image:'image1.jpg'},
    {title:'Song 2',subtitle:'Song sub',audio:'song2.mp3',image:'image2.jpg'},
  ]
  return (
    <>
    <Player audio={musicArray} isPlaying={isPlaying} setisPlaying={setisPlaying} />
    </>
  )
}

export default App

Configuration

Below is all the available options you can pass to the component. Options without defaults are required. We will add more customization soon.!🚀🚀🚀

Name	Type	Default	Description
theme	string	null	By default it will be white theme. Other themes are glass, black, blue, purple
audio	array	null	Simply pass an array of object like this [{title:'',subtitle:'',audio:'',image:''}] . Apart from audio key you can pass value for other keys
isPlaying	boolean	false	This is a Boolean value. Pass the first parameter of useState.
setisPlaying	function	null	This function changes the Boolean value of isPlaying. Pass the second parameter of useState

Made with ❤