Brgndy-react-metronome NPM

brgndy-react-metronome

React Metronome Library Component

installing

npm install brgndy-react-metronome

Usage

Import components

import { Metronome } from 'brgndy-react-metronome';

export default function Component() {
  return (
    <Metronome>
      <Metronome.BPMInput />
      <Metronome.Button />
    </Metronome>
  );
}

Metronome Props

Name	Datatype	Default	Description
minBpm	number or undefined	1	Sets the minimum BPM (Beats Per Minute) for the metronome. The default value is 1.
maxBpm	number or undefined	300	Sets the maximum BPM for the metronome. The default value is 300.
autoPlay	boolean or undefined	false	Determines whether the metronome should automatically start playing when the component is mounted. The default value is false.
onEndCount	() => void or undefined	() => {}	Callback function that is called when the metronome reaches the last beat. The default value is an empty function.
maxBeatCount	number or undefined	4	Sets the maximum number of beats per measure. For example, setting it to 4 means the metronome operates in 4/4 time. The default value is 4.

Explanation

- minBpm

Defines the minimum BPM that the metronome can be set to. This ensures that the BPM is not set to an excessively low value.

- maxBpm

Defines the maximum BPM that the metronome can be set to, preventing it from being set too high.

- autoPlay

When this prop is set to true, the metronome will automatically start playing as soon as the component is rendered, eliminating the need for manual intervention.

- onEndCount

This callback function is executed when the metronome reaches the maxBeatCount. It allows you to perform specific actions when the metronome finishes a measure.

- maxBeatCount

Determines the number of beats in each measure. For example, setting it to 4 makes the metronome operate in 4/4 time, while setting it to 3 would mean 3/4 time.

Metronome Input Component Props

Name	Datatype	Default	Description
type	number or range	number	The style you want to apply BPM style. Can choose number or range
className	string or undefined	""	className you want to apply that component.

Metronome Button Component Props

Name	Datatype	Default	Description
buttonTexts	string, string	"재생", "일시정지"	texts you want to insert. if the metronome is playing, component shows buttonTexts1. and if the metronome is not playing, component shows buttonTexts0
className	string or undefined	""	className you want to apply that component.