# P5js + React + Web Workers Demo App

**URL:** https://discourse.processing.org/t/p5js-react-web-workers-demo-app/11513
**Category:** Gallery
**Created:** [May 23, 2019, 9:48am UTC](https://discourse.processing.org/t/p5js-react-web-workers-demo-app/11513 "2019-05-23T09:48:30Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![atoro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/atoro/32/1351_2.png) [@atoro](https://discourse.processing.org/u/atoro)
#### Post date: [May 23, 2019, 9:48am UTC](https://discourse.processing.org/t/p5js-react-web-workers-demo-app/11513/1 "2019-05-23T09:48:30Z")

</div>

# Diagnosing Hypothermia Symptoms

 ![alt application screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2cd84ff7d7c211384a6dbec14352b62e95a479dc.png)

## Main goals of the project

This project demonstrates how to combine React (including the latest features such as **hooks and context** ), p5.js and Web Workers:

1. Build a single page application (SPA) using the React and p5js libraries.
2. Use Web Workers to run tasks in background threads.

The basic idea is that the p5.js sketch is wrapped in a React component. The data that comes into the sketch is passed on to this component as props. Callbacks are used to return information back from the sketch to the application.

* * *

Check out the online version [here: http://hypothermia.surge.sh/](http://hypothermia.surge.sh/).  
**Source code** is available [here: https://github.com/atorov/react-p5js-hypothermia-demo](https://github.com/atorov/react-p5js-hypothermia-demo).

* * *

⚠ **This is a demo application. DO NOT use it in real situations to diagnose or treat hypothermia and frostbite!**

* * *

Another examples, build on the same concept, can be found [here](https://github.com/atorov/react-p5js), [here](https://github.com/atorov/react-hooks-p5js), and [here](https://github.com/atorov/fractal-tree-simulator).