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 [email protected]

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 ❤