This project was created to coordinate two things:
use a forked tagged version of jspsych that was packaged (prior to official supported version)
wrap jspsych in a React component as a window to be used with other projects
jspsych-react was used in BrainWaves until v0.9.0 where that project began using lab.js for its experiment presentation layer.
npm install jspsych-react
You can use the ExperimentWindow component to include a jsPsych experiment in your React project. For example:
importReact,{Component}from'react'import{ExperimentWindow}from"jspsych-react";import{visualOddball}from"./your_experiments/experiment_timeline";import{callbackHTMLDisplay,callbackImageDisplay}from"./custom_plugins/plugins";exportdefaultclassExperimentWindowextendsComponent{render(){return(<div><ExperimentWindowsettings={{timeline: visualOddball}}plugins={{"callback-html-display": callbackHTMLDisplay,"callback-image-display": callbackImageDisplay}}/></div>);}}You can also import the jsPsych object to access other jsPsych functionalities, such as updating the progress bar during a jsPsych experiment. For example:
import{jspsych}from"jspsych-react";exportconstupdateProgress=()=>jsPsych.setProgressBar(jsPsych.progress().current_trial_global/jspsychObject.sample.size);| 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. |
| 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. |
MIT © Teon L Brooks