react-epotion 🧪

Simple component for managing Epotion tracking.

Views 🌁

| Disabled View | Disabled Minimized View | Enabled View | Enabled Minimized View | | :-----------: | :---------------------: | :-----------: | :--------------------: | | | | | |

Install 🔧

use NPM:

npm i -S react-epotion

use Yarn:

yarn add react-epotion

Example 🤓

import Epotion from 'react-epotion';

const YourComponent = () => <Epotion />;

export default YourComponent;

Options ⚙️

| Name | Description | Default | Type | Required | | :--: | :---------: | :-----: | :--: | :------: | | minimized| Specifies if the window for Epotion is minimized. User has possibility to maximize it. | false | bool | ❌ | | text| Text that's displayed when tracking is disabled. | 'Allow us to track your emotions while you browse the page so we could provide you with better user experience. Data is collected anonymously.' | string | ❌ | | readMoreText| Text for Read More button. | 'Click here to read more.' | string | ❌ | | readMoreUrl| Url for Read More button. | 'https://marcinxkaminski.github.io/epotion-api/epotion.html' | string | ❌ | | startTrackingText| Text for Start Tracking Button. | '🚀 start tracking' | string | ❌ | | stopTrackingText| Text for Stop Tracking Button. | '✋🏻 stop tracking' | string | ❌ | | customReporter| Specifies the reporter that will be used for reporting data. If you set your own reporter, default (Epotion's) reporter will be skipped. For more info check Epotion docs here. | undefined | function | ❌ | | enableReporting| Specifies if the reporting feature should be enabled. | true | bool | ❌ |

Future Work 🔮

• [ ] Test the component
• [ ] Add more views, e.g. statistics view, to display averages of already gathered data or page statistics view

Development 👷🏼‍♂️

git clone https://github.com/marcinxkaminski/react-epotion.git
cd react-epotion
npm ci
npm run start

Contribution

Feel free to contribute - every help is welcome 🙏🏻