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
type AudioGender = 'male' | 'female';
type CircleNumberColors = [string, string, string, string];
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