dha-breathing-exercise
Advanced tools
Readme
This module is a React BreathingExercise component used for inhale/exhale breathing with a seconds timer and breathing cycles count.
Install from npm:
If you want to use your own local image files with this package there are a couple of ways to do this in create-react-app, see Option 1 and Option 2.
Option 1: Import Image in JS Using Relative Path.
Relative folder (./src/assets/images) - Add image files to a relative folder from source. Change the path and folder name to your application structure and adjust the import path when importing the image.
Importing Images in JS Example:
Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.
// Image
import imagePng from '../assets/images/image.png';
<Background alt="Image alt" image={imagePng} scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src={imagePng} styles={styles.image} />;
Option 2: CRA Public Folder Assets - NOT Recommended
Public folder (./public) - Add image files to CRA public folder. Create your own folder structure and adjust the path when using the asset.
Using CRA Public Folder Example:
Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.
// Image
<Background alt="Image alt" image="assets/images/image.png" scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src="assets/images/image.png" styles={styles.image} />;
BreathingExercise Props:
Disclaimer: For this demo code to work with imported images in JS and from the public folder options, add and/or replace dha-logo.png with your own image file.
Add and/or Replace Image Files in Application:
Home.tsx - Functional component
import { Typography } from '@material-ui/core';
import { BreathingExercise } from 'dha-breathing-exercise';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
const Home: React.FC = () => (
<>
<Typography variant="h5">Option 1: Import Image in JS Using Relative Path</Typography>
<BreathingExercise
breathingCycles={8}
exhaleSeconds={3}
inhaleSeconds={3}
redirectButtonRoute="#/"
redirectButtonText="Next"
alt="Background Image"
image={dHALogoRelAssets}
/>
<Typography variant="h5">Option 2: Hosted Image</Typography>
<BreathingExercise
breathingCycles={8}
exhaleSeconds={3}
inhaleSeconds={3}
redirectButtonRoute="#/"
redirectButtonText="Next"
alt="Background Image"
image="https://via.placeholder.com/250"
/>
<Typography variant="h5">Option 3: CRA Public Folder Image - NOT Recommended</Typography>
<BreathingExercise
breathingCycles={8}
exhaleSeconds={3}
inhaleSeconds={3}
redirectButtonRoute="#/"
redirectButtonText="Next"
alt="Background Image"
image="dha-logo.png"
/>
</>
);
export default Home;
Home.tsx - Class component
import { Typography } from '@material-ui/core';
import { BreathingExercise } from 'dha-breathing-exercise';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
class Home extends React.Component {
render() {
return (
<>
<Typography variant="h5">Option 1: Import Image in JS Using Relative Path</Typography>
<BreathingExercise
breathingCycles={8}
exhaleSeconds={3}
inhaleSeconds={3}
redirectButtonRoute="#/"
redirectButtonText="Next"
alt="Background Image"
image={dHALogoRelAssets}
/>
<Typography variant="h5">Option 2: Hosted Image</Typography>
<BreathingExercise
breathingCycles={8}
exhaleSeconds={3}
inhaleSeconds={3}
redirectButtonRoute="#/"
redirectButtonText="Next"
alt="Background Image"
image="https://via.placeholder.com/250"
/>
<Typography variant="h5">Option 3: CRA Public Folder Image - NOT Recommended</Typography>
<BreathingExercise
breathingCycles={8}
exhaleSeconds={3}
inhaleSeconds={3}
redirectButtonRoute="#/"
redirectButtonText="Next"
alt="Background Image"
image="dha-logo.png"
/>
</>
);
}
}
export default Home;
The package uses the Typescript compiler (TSC) to build the source code. To build the project run the following command:
Note: You must tell the local dha-breathing-exercise to use all peerDependencies from the app you are including the dha-breathing-exercise into using npm link (the example below is for using the dha-breathing-exercise in the pwa-starter).
See the dha-breathing-exercise package.json peerDependencies section.
"peerDependencies": {
"@material-ui/core": "^X.X.X",
"@material-ui/icons": "^X.X.X",
"react": "^X.X.X",
"react-dom": "^X.X.X"
}
You can install the package into your own React application/pwa-starter as a dependency. After you build the dha-breathing-exercise, install the package into the app using the following command:
Npm Install Issues
Hook Errors
npm test command.Example:
test('renders without crashing', () => {
shallow(<Demo prop1="1" prop2={2} />);
});
test('hello world string', () => {
expect(demo()).toMatch(`RENAME Demo files to start.`);
});
https://bitbucket.org/wmtp/dha-breathing-exercise
https://www.npmjs.com/package/dha-breathing-exercise
This project is licensed under the MIT License.
FAQs
DHA SDK breathing exercise
We found that dha-breathing-exercise demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.
Security News
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.