hrvcomponents
v0.7.11
Published
A collection of web components for use in meditation and HRV training apps.
Downloads
31
Maintainers
Readme
HRV Components
A collection of components for use in heart rate monitoring apps.
Usage -- web page
Put these tags
<script type="module" src="https://unpkg.com/[email protected]/dist/hrvcomponents/hrvcomponents.esm.js"></script>
<script nomodule="" src="https://unpkg.com/[email protected]/dist/hrvcomponents/hrvcomponents.js"></script
in the head of your index.html
Usage -- Ionic/Angular
Install the package
npm install --save hrvcomponents
See the [Stencil docs] (https://stenciljs.com/docs/angular) for a walk-through of how to
- Include the
CUSTOM_ELEMENTS_SCHEMA
in the modules that use the components. - Call
defineCustomElements(window)
frommain.ts
(or some other appropriate place).
Other frameworks
Install the package
npm install --save hrvcomponents
Then in main.ts
or the equivalent,
import { defineCustomElements } from 'test-components/dist/loader';
defineCustomElements(window);
See details for your framework at the [Stencil docs] (https://stenciljs.com/docs/overview) under Framework Integrations.
For example, in a Vue app, you may need to config ignored elements.
API
<breath-circle>
The component is helpful for guiding breathing rates. It displays a circle which grows and shrinks at a controllable rate; you simply time your inhales/exhales to the growth/shrinking of the circle.
[Demo it here] (https://s3.eu-central-1.amazonaws.com/moodhealer.com/breathing/index.html)
Examples:
<breath-circle></breath-circle >
<breath-circle base-rate="3000"></breath-circle >
<breath-circle inhale-time="4000" exhale-time="4000" inhale-hold-time="1200" exhale-hold-time="3000" is-verbose="true"></breath-circle >
Properties
Most properties set the time for the stages in the breathing cycle, in milliseconds.
| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| baseRate
| base-rate
| If set, overrides inhale/exhale times and sets hold times to 100ms | number
| undefined
|
| inhaleTime
| inhale-time
| | number
| 2000
|
| inhaleHoldTime
| inhale-hold-time
| | number
| 100
|
| exhaleTime
| exhale-time
| | number
| 2000
|
| exhaleHoldTime
| exhale-hold-time
| | number
| 100
|
| isVerbose
| is-verbose
| Toggles console messaging of changes to the different times. | boolean
| false
|
*Built with [St