# react_proctoring_library

> Used to proctor online tests

Latest version **0.0.7** (published 2022-01-14) · 0 weekly downloads

## Install

```sh
npm install react_proctoring_library
pnpm add react_proctoring_library
yarn add react_proctoring_library
bun add react_proctoring_library
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2022-01-14 |
| First published | 2022-01-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ayushkagrawal |
| Maintainers | ayushkagrawal |

## Links

- npm: https://www.npmjs.com/package/react_proctoring_library
- npm.io page: https://npm.io/package/react_proctoring_library

## Dependencies (5)

- [bootstrap](https://npm.io/package/bootstrap.md) ^5.1.3
- [react-webcam](https://npm.io/package/react-webcam.md) ^6.0.0
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.0.4
- [@tensorflow/tfjs](https://npm.io/package/@tensorflow/tfjs.md) ^3.9.0
- [@tensorflow-models/body-pix](https://npm.io/package/@tensorflow-models/body-pix.md) ^2.2.0

## Recent versions

- 0.0.7 (latest) — 2022-01-14
- 0.0.6 — 2022-01-13
- 0.0.5 — 2022-01-13
- 0.0.4 — 2022-01-13
- 0.0.2 — 2022-01-12
- 0.0.1 — 2022-01-12

## README

# 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.


## 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                                                                                                                              |
| ------------------- | ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `TestComponent`     | Yes        | JSX Component | The Component which you want to proctor                                                                                                  |
| `testIdentifier`    | Yes        | String        | A unique string to identify every test                                                                                                   |
| `fullScreenMessage` | Optional   | String        | If you want your test to run only in full screen mode, this message will appear instead of TestComponent whenever User exits Full Screen |

## Documentation

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

- `ProctorApp` - A Component which will help you in proctoring
- `Object getStatistics(string: testIdentifier)` - 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 testIdentifier = 'unique-proctoring-identifier';
	const fullScreenMessage = 'This test can only be completed in Full Screen Mode, do you want to start this test?';
	const  getStats = e  => {
		e.preventDefault();
		console.log(getStatistics(testIdentifier));
	};
	return (
		<div className="App">
			<ProctorApp TestComponent={Test} testIdentifier={testIdentifier} fullScreenMessage={fullScreenMessage} />
		</div>
		<button  onClick={getStats}>Get Statistics</button>
	);
}

export default App;
```

---
_Source: https://npm.io/package/react_proctoring_library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._