Skip to main content
Version: v2.2.0

ReactComponent

Defined in: parser/types.ts:822

The ReactComponent interface is used to define the properties of a react component. This component is used to render react code with certain parameters. These parameters can be used within your react code to render different things.

Unlike other types of components, the path for a React component is relative to the src/public/ folder. Similar to our standard assets, we suggest creating a folder named src/public/{studyName}/assets to house all of the React component assets for a particular study. Your React component which you link to in the path must be default exported from its file.

React components created this way have a generic prop type passed to the component on render, <StimulusParams<T>>, which has the following types.

{
parameters: T;
setAnswer: ({ status, provenanceGraph, answers }: { status: boolean, provenanceGraph?: TrrackedProvenance, answers: Record<string, any> }) => void
}

parameters is the same object passed in from the ReactComponent type below, allowing you to pass options in from the config to your component. setAnswer is a callback function allowing the creator of the ReactComponent to programmatically set the answer, as well as the provenance graph. This can be useful if you don't use the default answer interface, and instead have something more unique.

So, for example, if I had the following ReactComponent in my config

{
type: 'react-component';
path: 'my_study/CoolComponent.tsx';
parameters: {
name: 'Zach';
age: 26;
}
}

My react component, CoolComponent.tsx, would exist in src/public/my_study/assets, and look something like this

export default function CoolComponent({ parameters, setAnswer }: StimulusParams<{name: string, age: number}>) {
// render something
}

For in depth examples, see the following studies, and their associated codebases. https://revisit.dev/study/demo-click-accuracy-test (https://github.com/revisit-studies/study/tree/v2.2.0/src/public/demo-click-accuracy-test/assets) https://revisit.dev/study/example-brush-interactions (https://github.com/revisit-studies/study/tree/v2.2.0/src/public/example-brush-interactions/assets)

Extends

Properties

PropertyTypeDescriptionInherited fromDefined in
allowFailedTraining?booleanControls whether the component should allow failed training. If present, will override the allow failed training setting in the uiConfig.BaseIndividualComponent.allowFailedTrainingparser/types.ts:743
correctAnswer?Answer[]The correct answer to the component. This is used for training trials where the user is shown the correct answer after a guess.BaseIndividualComponent.correctAnswerparser/types.ts:703
description?stringThe description of the component. This is used to identify and provide additional information for the component in the admin panel.BaseIndividualComponent.descriptionparser/types.ts:707
enumerateQuestions?booleanWhether to prepend questions with their index (+ 1). This should only be used when all questions are in the same location, e.g. all are in the side bar. If present, will override the enumeration of questions setting in the uiConfig.BaseIndividualComponent.enumerateQuestionsparser/types.ts:749
helpTextPath?stringThe path to the help text file. This is displayed when a participant clicks help. Markdown is supported. If present, will override the help text path set in the uiConfig.BaseIndividualComponent.helpTextPathparser/types.ts:723
instruction?stringThe instruction of the component. This is used to identify and provide additional information for the component in the admin panel.BaseIndividualComponent.instructionparser/types.ts:719
instructionLocation?ConfigResponseBlockLocationThe location of the instructions. If present, will override the instruction location setting in the uiConfig.BaseIndividualComponent.instructionLocationparser/types.ts:721
meta?Record<string, unknown>The meta data for the component. This is used to identify and provide additional information for the component in the admin panel.BaseIndividualComponent.metaparser/types.ts:705
nextButtonDisableTime?numberThe time in milliseconds to wait before the next button is disabled. If present, will override the next button disable time setting in the uiConfig.BaseIndividualComponent.nextButtonDisableTimeparser/types.ts:733
nextButtonEnableTime?numberThe time in milliseconds to wait before the next button is enabled. If present, will override the next button enable time setting in the uiConfig.BaseIndividualComponent.nextButtonEnableTimeparser/types.ts:731
nextButtonLocation?ConfigResponseBlockLocationThe location of the next button. If present, will override the next button location setting in the uiConfig.BaseIndividualComponent.nextButtonLocationparser/types.ts:729
nextButtonText?stringThe text to display on the next button. If present, will override the next button text setting in the uiConfig.BaseIndividualComponent.nextButtonTextparser/types.ts:727
nextOnEnter?booleanWhether enter key should move to the next question. If present, will override the enter key setting in the uiConfig.BaseIndividualComponent.nextOnEnterparser/types.ts:725
parameters?Record<string, unknown>The parameters that are passed to the react component. These can be used within your react component to render different things.-parser/types.ts:827
pathstringThe path to the react component. This should be a relative path from the src/public folder.-parser/types.ts:825
previousButton?booleanWhether to show the previous button. If present, will override the previous button setting in the uiConfig.BaseIndividualComponent.previousButtonparser/types.ts:735
previousButtonText?stringThe text that is displayed on the previous button. If present, will override the previous button text setting in the uiConfig.BaseIndividualComponent.previousButtonTextparser/types.ts:737
provideFeedback?booleanControls whether the component should provide feedback to the participant, such as in a training trial. If present, will override the provide feedback setting in the uiConfig.BaseIndividualComponent.provideFeedbackparser/types.ts:739
recordAudio?booleanWhether or not we want to utilize think-aloud features. If present, will override the record audio setting in the uiConfig.BaseIndividualComponent.recordAudioparser/types.ts:745
recordScreen?booleanWhether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.co.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.BaseIndividualComponent.recordScreenparser/types.ts:747
responseResponse[]The responses to the componentBaseIndividualComponent.responseparser/types.ts:699
responseDividers?booleanWhether to show the response dividers. If present, will override the response dividers setting in the uiConfig.BaseIndividualComponent.responseDividersparser/types.ts:751
responseOrder?"fixed" | "random"The order of the responses. Defaults to 'fixed'.BaseIndividualComponent.responseOrderparser/types.ts:755
showTitle?booleanControls whether the title should be hidden in the study. If present, will override the title setting in the uiConfig.BaseIndividualComponent.showTitleparser/types.ts:715
showTitleBar?booleanControls whether the title bar should be hidden in the study. If present, will override the title bar setting in the uiConfig.BaseIndividualComponent.showTitleBarparser/types.ts:717
sidebarWidth?numberThe width of the left sidebar. If present, will override the sidebar width setting in the uiConfig.BaseIndividualComponent.sidebarWidthparser/types.ts:713
style?StylesYou can set styles here, using React CSSProperties, for example: {"width": 100} or {"width": "50%"}BaseIndividualComponent.styleparser/types.ts:759
stylesheetPath?stringThe path to the external stylesheet file.BaseIndividualComponent.stylesheetPathparser/types.ts:757
trainingAttempts?numberThe number of training attempts allowed for the component. If present, will override the training attempts setting in the uiConfig.BaseIndividualComponent.trainingAttemptsparser/types.ts:741
type"react-component"--parser/types.ts:823
windowEventDebounceTime?numberDebounce time in milliseconds for automatically tracked window events. If present, will override the window event debounce time setting in the uiConfig.BaseIndividualComponent.windowEventDebounceTimeparser/types.ts:753
withProgressBar?booleanControls whether the progress bar is rendered. If present, will override the progress bar setting in the uiConfig.BaseIndividualComponent.withProgressBarparser/types.ts:709
withSidebar?booleanControls whether the left sidebar is rendered at all. Required to be true if your response's location is set to sidebar for any question. If present, will override the sidebar setting in the uiConfig.BaseIndividualComponent.withSidebarparser/types.ts:711