npm install jspsych-react
You can use the Experiment component to include a jsPsych experiment in your React project. For example:
importReact,{Component}from'react'import{Experiment}from"jspsych-react";import{visualOddball}from"./examples/timelines";import{callbackHTMLDisplay,callbackImageDisplay}from"./examples/plugins";exportdefaultclassExperimentComponentextendsComponent{render(){return(<div><Experimentsettings={{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:
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 Brooks