# react-veyetals-view

[![NPM](https://img.shields.io/npm/v/@veyetals/react-veyetals-view.svg)](https://www.npmjs.com/package/@veyetals/react-veyetals-view) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-veyetals-view
```

\*Copy models folder from package directory into public folder of application.

## Usage

**userId:** Required\* Unique Id of user.

**channelId:** Required\* Unique channel ID/company name. Maximum length: 128 characters. May include numbers, letters, underscores (\_), and hyphens (-)

**onComplete:** Function to be called when user clicks OK button on popup modal once veyetals scanning is complete. Final vital results passed to function.

**showUI:** Enable or disable Veyetals' cards to be shown; Default is true.

**modelPath:** Path to modal folder; Default is process.env.PUBLIC_URL + '/models'.

```jsx
import React, { useState } from 'react'

import VeyetalsView from '@veyetals/react-veyetals-view'
import '@veyetals/react-veyetals-view/dist/index.css'

export default function App() {

  const [userId, setUserId] = useState('test-user');
  const [channelId, setChannelId] = useState('test-channel');
  const [showUI, setShowUI] = useState('true');

  const onComplete = (vitals) => {
    // triggers when user clicks "OK" button on modal that pops up when scanning is complete
    // final vital results
    console.log(vitals)
  };

  return (
    <VeyetalsView
      userId={userId}
      channelId={channelId}
      onComplete={onComplete}
      showUI={showUI}
      modelPath={'./path to model file'}
    />
  )
}
```

## License

MIT © [](https://github.com/)