0.6.3 • Public • Published

Quinoa-story-player - data stories player component

Quinoa-story-player is a module that provides a react component for displaying quinoa's data stories in read-only mode.

It is part of the quinoa project family, a suite of digital storytelling tools tailored for the FORCCAST pedagogical program and médialab sciences po scientific activities.

An example of editing apps for making data presentations is fonio.


npm scripts

npm run build # builds component to ./build dir
npm run lint # lints code (auto fix on) according to linting settings in package.json
npm run comb # prettifies scss code
npm run test # run mocha testing on each *.spec.js files in ./src dir
npm run dev # starts a storybook instance to live test the component in several implementation scenarii (see ./stories folder)
npm run build-storybook # initializes storybook
npm run git-add-build # adds build to the current git record

Installing the module as a dependency

npm install --save https://github.com/medialab/quinoa-story-player

Installing the module as a project

git clone https://github.com/medialab/quinoa-story-player
cd quinoa-story-player
npm install
npm run build-storybook


The project uses storybook to visually test the possible implementations of the component.

npm run dev

Module API

The module exports by default a react component. It also exports a templates object which exposes metadata about available templates to display presentations.

import StoryPlayer from 'quinoa-story-player'; // provides usable react component
import {templates} from 'quinoa-story-player'; // provide metadata about available templates

Presentation component API

QuinoaStoryPlayer.propTypes = {
   * component must be given a story as prop
   * (see ./src/storyModel.json and ./quinoa-story-document-model-description.md)
  story: PropTypes.Object.isRequired


The component wraps a display-related component which corresponds to a specific templates.

For now there is only one template :

  • garlic : story is presented as one single page - document header is displayed full-height on top of document - block assets such as presentations and videos are displayed full-height - when hovering a presentation scroll is used to navigate within the presentation.

Creating new templates

Creating a new template supposes to create a new folder within src/templates/ folder, and fill it with at least three files:

  • an info.json file describing the metadata of the template
  • a scss file describing component default style
  • a js script exposing a react component

Example of an info.json:

  "id": "garlic",
  "name": "Garlic",
  "description": "One-page scrollytelling - sections are displayed one on top of the other - assets are displayed in full length",
  "acceptsOptions" : [

The react component of the template must comply to the following API :

MyTemplate.propTypes = {
   * component must be given a story as prop
   * (see ./src/storyModel.json and ./quinoa-story-document-model-description.md)
  story: PropTypes.Object.isRequired

Pre-commit hook

The project uses a precommit hook before each commit to ensure the code remains clean at all times. Check out the package.json to learn more about it.




npm i quinoa-story-player

DownloadsWeekly Downloads






Unpacked Size

83.8 MB

Total Files


Last publish


  • mydu
  • robindemourat