# jspsych-react

> A React wrapper for jsPsych

Latest version **0.3.0** (published 2019-07-07) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install jspsych-react
pnpm add jspsych-react
yarn add jspsych-react
bun add jspsych-react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2019-07-07 |
| First published | 2018-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | teonbrooks |

## Links

- npm: https://www.npmjs.com/package/jspsych-react
- Repository: https://github.com/makebrainwaves/jspsych-react
- Homepage: https://github.com/makebrainwaves/jspsych-react#readme
- Issues: https://github.com/makebrainwaves/jspsych-react/issues
- npm.io page: https://npm.io/package/jspsych-react

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^0.14.3
- [jspsych](https://npm.io/package/jspsych.md) git://github.com/makebrainwaves/jspsych.git#modular

## Recent versions

- 0.3.0 (latest) — 2019-07-07
- 0.2.2 — 2019-06-17
- 0.2.1 — 2018-08-28
- 0.1.2 — 2018-08-27
- 0.1.1 — 2018-08-25

## README

<!-- Logo -->
<p align="center">
    <img width="400" src="https://raw.githubusercontent.com/makebrainwaves/jspsych-react/master/jspsych-react-logo.jpg">
</p>

# Getting Started

`npm install jspsych-react`

You can use the `Experiment` component to include a jsPsych experiment in your React project. For example:

```javascript
import React, { Component } from 'react'
import { Experiment } from "jspsych-react";
import { visualOddball } from "./examples/timelines";
import { callbackHTMLDisplay, callbackImageDisplay } from "./examples/plugins";

export default class ExperimentComponent extends Component {
  render() {
    return (
      <div>
        <Experiment
          settings={{ timeline: visualOddball }}
          plugins={{
            "callback-html-display": callbackHTMLDisplay,
            "callback-image-display": callbackImageDisplay
          }}
        />
      </div>
    );
  }
}
```

You can also import the jsPsych object to access other jsPsych functionality, such as updating the progress bar during a jsPsych experiment. For example:

```javascript
import { jspsych } from "jspsych-react";

export const updateProgress = () =>
  jsPsych.setProgressBar(
    jsPsych.progress().current_trial_global / jspsychObject.sample.size
  );
```

# API

## Props

### Experiment

| Name     | Type     | Default    | Description                                                                                                                                                                                                                                                                                         |
| -------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| settings | `object` | `required` | The settings object is passed to the `jsPsych.init()` function and defines many aspects of an experiment. It can contain many parameters, but the only _required_ parameter is a timeline. See the the [jsPsych API documentation](https://www.jspsych.org/core_library/jspsych-core/#jspsychinit). |
| plugins  | `object` | `null`     | Custom plugins to be passed to jsPsych for use in the experiment. Object keys should match the names of the plugins referenced in the timeline.

# License
MIT © [Teon Brooks](http://teonbrooks.github.io/)

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