dha-breathing-exercise

dha-breathing-exercise

This breathing exercise is designed to help create a relaxation response using a four count method of breathing.

Getting Started

Install

Install from npm:

• npm i dha-breathing-exercise dha-assets

BreathingExercise Component

BreathingExercise Props:

• numberColors [Optional] - A 4 count tuple specifying the color of the numbers during each cycle
• className [Optional] - Allows you to adjust the styles on a specific component
• gender [Optional] - Allows you to change the audio between female and male

Custom Types

While not exported these types should help you understand the props used in this module

// Used in the gender prop, determines what audio to play.
type AudioGender = 'male' | 'female';

// Used in the numberColors prop, all 4 colors are required and determines the color of the numbers in the exercise.
type CircleNumberColors = [string, string, string, string];

// Used in the className prop as ClassesOverride<typeof useStyles>, allows you to inject custom styling into the components.
type ClassesOverride<UseStyles extends () => Record<string, string>> = Partial<
  Record<keyof ReturnType<UseStyles>, string>
>;

Usage

Please make sure to call LoadAudio() early on in your app's lifetime to ensure all the audio files will be loaded on time.

Basic Usage

const Home = () => {
  const classes = useStyles();
  return (
    <BreathingExercise />
  );
};

The above code will default to the packages color scheme with the female audio.

Custom usage

styles.ts

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    exerciseMessage: {
      color: 'blue',
    },
    shrinkingCircle: {
      backgroundColor: 'red'
    }
  })
);

Home.tsx

const Home = () => {
  const classes = useStyles();
  return (
    <BreathingExercise
      gender={'male'}
      numberColors={['white', 'white', 'white', 'white']}
      className={{
        exercisemessage: classes.exerciseMessage,
        shrinkingCircle: classes.shrinkingCircle,
      }}
    />
  );
};

The above code will change the color of the exercises text to blue and the exhale circle to red, it will also change the audio to male and set all of the numbers to white

Class Name List

Below is the list of classnames for use with the className prop, Note that you're not required to change all of these at once and can edit each component to fit your project as needed.

    breathingstepsroot
    stopButton
    breathingexerciseroot
    basecircle
    startcircle
    expandingCircle
    shrinkingCircle
    restCircle
    holdCircle
    exercisemessage
    countdownnumbers
    timerbuffer
    nodisplay

Contribute

see Github wiki

NPM

https://www.npmjs.com/package/dha-breathing-exercise

License

pending