dha-breathing-exercise
Advanced tools
This module is a React BreathingExercise component used for inhale/exhale breathing with a seconds timer and breathing cycles count.
Install from npm:
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:
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} />;
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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.