[](https://www.npmjs.com/package/@rssa-project/study-template) [](https://opensource.org/licenses/MIT)
npm install @rssa-project/study-template

A React component library providing standard layouts, pages, and hooks for building research studies on the RSSA Platform. It creates a consistent UI and logic flow (consent -> survey -> stimuli -> feedback) across different RSSA studies.
``bash`
npm install @rssa-project/study-template
Wrap your main router with the RouteWrapper, ensuring you pass a component map mapping step types to your page components.
`tsx
import { RouteWrapper, WelcomePage, SurveyPage, FinalPage } from '@rssa-project/study-template';
import UserCustomPage from './UserCustomPage';
// Map 'step_type' from your study config to React components
const componentMap = {
welcome: WelcomePage,
survey: SurveyPage,
custom_task: UserCustomPage,
completion: FinalPage,
};
function App() {
return (
{/ RouteWrapper handles navigation logic based on study state /}
);
}
`
- Standard Pages: ConsentPage, SurveyPage, MovieRatingPage, DemographicsPage.useNextButtonControl
- Hooks: , useStepCompletion.
- Contexts: Handles participant state and navigation flow automatically.
- React 18+
- @rssa-project/api` (Peer Dependency)