react-radio-player v1.0.5

A Simple component library for radio player in react

Table of Contents

• Overview
• Installation
• Basic Example
• APIs
  • Base Props
  • Bottom Bar
• Contributing
• Try out
• License

Overview

This is a simple and light-weight component library to handle radio player in React.js projects.

Installation

# npm 
npm install react-radio-player

# yarn
yarn install react-radio-player

Basic example

Usage of this component is so easy you just need to import your desired component, pass title and streamURL, then you're good to go:

import RadioBottomBarPlayer from "../radio-bottom-bar-player";

// ... 

<RadioBottomBarPlayer
  titleChild="Testing Station title"
  streamUrl={stationUrl}
/>

APIs

Base Props

type customClassName = {
    container?: string;
    infoContainer?: string;
    imageContainer?: string;
    image?: string;
    textsContainer?: string;
    title?: string;
    description?: string;
    secondDescription?: string;
    player?: string;
    playButton?: string;
    prevButton?: string;
    nextButton?: string;
    volumeContainer?: string;
    volume?: string;
    volumeIcon?: string;
    playerButtonsContainer?: string;
  }

interface IBaseTheme {
  backgroundColor: string;
  fontFamily: string;
  TitleFontSize: string;
  descriptionFontSize: string;
  secondDescriptionFontSize: string;
  primaryColor: string;
  disabledColor: string;
  hoverColor: string;
  titleFontWeight: string;
  descriptionFontWeight: string;
  secondDescriptionFontWeight: string;
  buttonsColor: string;
  firstTextColor: string;
  secondTextColor: string;
  padding: string;
  volumeTrackColor: string;
  voluemHandleColor: string;
  volumeRailColor: string;
  volumeIconColor: string;
}

Try Out

You can watch our staging components in a storybook and work around with it from this link

Bottom Bar

Bottom bar component will use all of basic props just for theme it will be like following:

export type RadioBottomBarTheme = IBaseTheme & {
  height: number;
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT