dha-breathing-exercise

dha-breathing-exercise

This module is a React BreathingExercise component used for inhale/exhale breathing with a seconds timer and breathing cycles count.

How to use

Installing the module

Use the following command to install from npm:

• npm install dha-breathing-exercise

Using the module

Props:

• breathingCycles: Number of breathing cycles
• exhaleSeconds: Exhale length in seconds
• inhaleSeconds: Inhale length in seconds
• redirectButtonRoute: Redirect button route
• redirectButtonText: Redirect button text
• alt: Background image text alternative
• image: Background image full path and file, or imported image file

Example of using the module:

/**
 * Importing images to React application:
 *
 * Option 1
 * import bgPng from '../assets/images/bg.png'; // relative path
 *
 * <BreathingExercise
 *   breathingCycles={8}
 *   exhaleSeconds={3}
 *   inhaleSeconds={3}
 *   redirectButtonRoute=""
 *   redirectButtonText="Next"
 *   alt="Background Image"
 *   image={bgPng}
 * />
 *
 * Option 2
 * Add image file to public folder, e.g. /public/assets/images/bg.png
 *
 * <BreathingExercise
 *   breathingCycles={8}
 *   exhaleSeconds={3}
 *   inhaleSeconds={3}
 *   redirectButtonRoute=""
 *   redirectButtonText="Next"
 *   alt="Background Image"
 *   image="assets/images/bg.png"
 * />
 */

import BreathingExercise from 'dha-breathing-exercise';
import React from 'react';
import bgPng from '../assets/images/bg.png';

class BreathingExerciseExample extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    // Construct your example here...
  }

  // Render the BreathingExercise component
  render() {
    return (
      <BreathingExercise
        breathingCycles={8}
        exhaleSeconds={3}
        inhaleSeconds={3}
        redirectButtonRoute="#/"
        redirectButtonText="Next"
        alt="Background Image"
        image={bgPng}
      />
    );
  }
}

export default BreathingExerciseExample;

Testing

• Tests can be ran with the npm test command.
• Tests are ran using Jest with Enzyme - More information about getting started with Jest can be found here.

Example render test:

it('renders without crashing', () => {
  shallow(<BreathingExercise />);
});

How to contribute

Setting up the module

• SSH: git clone [e-mail]:wmtp/dha-breathing-exercise.git
• HTTPS: git clone https://[e-mail]/wmtp/dha-breathing-exercise.git
• cd dha-breathing-exercise
• npm install

Building the module

The module uses Typescript compiler (TSC) to compile the source code. To build the project run the following command:

• npm run build

Installing the module in app for testing

You can install the module into your own React project as a dependency. After you clone the module you can install using the following command:

• npm install /absolute/path/to/dha-breathing-exercise
• i.e. -> npm install /Users/dha/Documents/projects/npm/dha-breathing-exercise

Viewing API docs

You can generate and view the API docs by running the following command:

• npm run styleguide:serve

This will start a development server on localhost:6060 showing all the properties for the BreathingExercise component.

You can also view the docs which are hosted here:

https://dhasdk.bitbucket.io/ReactModules/docs/dha-breathing-exercise/styleguide

Viewing source code

https://bitbucket.org/wmtp/dha-breathing-exercise

Published module

Here is where the module is currently published:

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

License

This project is licensed under the MIT License.