rage / likert-react

React Likert Scale

A react component for answering questionnaires according to the Likert scale in a graphical way.

Usage

import LikertScale from 'likert-react';
import React from 'react';
import { render } from 'react-dom';

const root = document.getElementById('app');

document.addEventListener('DOMContentLoaded', () => {
  const reviews = [
    { question: 'Code is readable' },
    { question: 'Tests are comprehensive' },
    { question: 'Webpack is configured well' }
  ];
  const onClick = (q, n) => console.info('question: ' + q + ' answer: ' + n);
  render(
    <LikertScale
      reviews={reviews}
      onClick={onClick}
    />, root)
});

Props

Prop	description	required	default
reviews	Represents all the questions and their the currently chosen values. Follows the following format: { question: string, review: ?number ⫾ [number] }. If review is an array, frozen is automatically set to true and the average of the reviews is displayed.	yes	undefined
onClick	A callback that gets triggered when an option is selected. Arguments passed to the callback: reviewQuestion: string, review: number	no	undefined
highlightColor	Color used to highlight chosen answers	no	#3498db
separatorType	Three options: dotted-line, striped and full-line	no	dotted-line
icons	An array of React-components representing each number on the scale, ordered from lowest to highest. The answer scale goes from 1 to the amount of given icons. The components should be given unique keys.	no	5 smiley icons from Google
frozen	Set to true to make the answers immutable.	no	false

SeparatorType Examples

full-line

striped