likert-react

0.0.0-beta6 • Public • Published

React Likert Scale

npm version

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

React Likert scale example

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

full-line example

striped

striped example

Package Sidebar

Install

npm i likert-react

Weekly Downloads

12

Version

0.0.0-beta6

License

MIT OR Apache-2.0

Unpacked Size

403 kB

Total Files

7

Last publish

Collaborators

  • irenenikk
  • nygrenh