This breathing exercise is designed to help create a relaxation response using a four count method of breathing.
Install from npm:
- npm i dha-breathing-exercise dha-assets
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>
>;
Please make sure to call LoadAudio()
early on in your app's lifetime to ensure all the audio files will be loaded on time.
const Home = () => {
const classes = useStyles();
return (
<BreathingExercise />
);
};
The above code will default to the packages color scheme with the female audio.
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
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
see Github wiki
https://www.npmjs.com/package/dha-breathing-exercise
pending