Skip to content

makebrainwaves/jspsych-react

 
 

Repository files navigation

Getting Started

npm install jspsych-react

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

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:

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

About

A simple React component for jspsych

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 67.6%
  • CSS 32.4%