npm package: @newtonschool/react_proctoring_library
Description: Used to proctor online tests
Author: ayushkagrawal,shreyachandra,weastel
Latest version: 0.0.135

# Welcome to react_proctoring_library · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Newton-School/proctoring_react/blob/main/LICENSE) [![npm (scoped)](https://img.shields.io/npm/v/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)

Hi! **react_proctoring_library** is a user friendly, easy to use and your _one-stop_ [npm library](https://www.npmjs.com/package/react_proctoring_library) which will provide you the ability to proctor all your exams, tests, quizzes, playgrounds, almost everything you need to proctor with the minimum effort possible. We have used [body-pix](https://www.npmjs.com/package/@tensorflow-models/body-pix) model from [tensorflow](https://www.tensorflow.org/) library to detect if user is looking outside the screen, multiple people visible in camera. We have also implemented tab switching tracker and full screen exit tracker.

## Why?

- In these times when most of the exams are conducted online, a lot of us want some sort of mechanism which could make their life easy while taking online test and **react_proctoring_library** has done this for you.

Future Plans?

- Detection of multiple persons via Audio.
- Provision of videos of the proctored sessios.
- Screenshots when proctoring params are breached.

## Installation

You must have [React](https://reactjs.org/) v16.8 or above installed in your project to use this proctoring library.

If you want, you can also [create a new react app](https://reactjs.org/docs/create-a-new-react-app.html) using `npx create-react-app my-new-app` command.

Once you have a react app, just type
`npm install react_proctoring_library` in your terminal and if everything goes fine, you are good to go.

## Props

| Props                  | isRequired | ParamsType    | Description                                                                                                                              |
| ---------------------- | ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `children`   | Yes        | JSX Component | The Component which you want to proctor                                                                                                  |
| `proctoringIdentifier` | Yes        | String        | A unique string to identify every test                                                                                                   |
| `proctoringParams`     | Optional   | Object   {userCount tabSwitch, fullscreenExit, lookedAway}     | Parameters on which the screen is proctored. By default, all parameters are true                                                                    |
| `shouldSendDataOnBreach`    | Optional   | Boolean     | True if data needs to be sent on breach, else False. Default is False           |
| `sendData`                  | Optional   | Function     | if shouldSendDataOnBreach is True, this callback is called with the details of the breach on every breach                                                                                        |

## Documentation

Currently, **react_proctoring_library** comes with 2 things:

- `ProctorApp` - A Component which will help you in proctoring
- `Object getStatistics(string: proctoringIdentifier)` - A function which will return a data Object with all Statistics
  about breaches.

```
import { ProctorApp, getStatistics } from  'react_proctoring_library';
function Test(props) {
	return (
		<div>
			<h1>Proctoring Window</h1>
		</div>
	);
}

function App() {
	const proctoringIdentifier = 'unique-proctoring-identifier';

	const  getStats = e  => {
		e.preventDefault();
		console.log(getStatistics(proctoringIdentifier));
	};
	return (
		<div className="App">
			<ProctorApp proctoringIdentifier={proctoringIdentifier}>
				<Test />
			</ProctorApp>
		</div>
		<button  onClick={getStats}>Get Statistics</button>
	);
}

export default App;
```