Tuesday, October 26, 2021
No menu items!
HomeTechnologyComputersA React component that renders a Likert scale

A React component that renders a Likert scale

 

React Likert Scale

A React component that renders a Likert scale

A React part that makes a Likert Scale for gathering information or to make an overview.

It has the accompanying highlights:

it is completely responsive (looks extraordinary on workstations and telephones)

has a little size (under 4kb)

has zero-conditions

the styling can be modified by giving your own CSS styles

A React component that renders a Likert scale

Installation

npm i react-likert-scale

Usage

import React from 'react';
import Likert from 'react-likert-scale';

export default () => {
  const likertOptions = {
    question: "What is your opinion of the President’s performance?",
    responses: [
      { value: 1, text: "Abysmal" },
      { value: 2, text: "Poor" },
      { value: 3, text: "Average", checked: true },
      { value: 4, text: "Good" },
      { value: 5, text: "Excellent" }
    ],
    onChange: val => {
      console.log(val);
    }
  };
  return (
    <Likert {...likertOptions} />
  )
}

Likert Props

Required props

reactions — (exhibit of articles) These are the radio catch alternatives. The worth key is what is

gotten back to the calling application in the onChange callback. text is the thing that’s appeared on-screen.

The discretionary checked key will pre-check a radio catch when set to valid.

Semi-required props

Actually, these are for the most part discretionary, anyway you need to pass in an onChange prop in the event that you need to be advised about which alternative a client picked.

onChange — (callback work) Optionally, you can give a callback work that profits the

estimation of the choice that was clicked.

For availability reasons, each likert scale on your page needs a remarkable identifier. In the event that you are

passing in an inquiry prop and each question is remarkable, at that point that text will be utilized to create a

special identifier. Then again, in the event that you are not utilizing question or the inquiry text is

copied across various likert scales, you should pass in an id prop.

  • question — (string) This is the prompt that displays above the options. The easiest way to
    create these likert scales is by passing in your question text in this prop, however if you want a
    more custom layout then you can omit this prop. You can see a grid layout example on
    Codepen
    that uses this technique.
  • id – (string) It is your responsibility to pass in a unique ID. If you are using the question
    prop it is safe to omit this id prop.

Optional props

  • flexible (boolean|integer) This controls the type of layout. When flexible is set to true,
    which is the default setting, the radio buttons will stretch to fill available space. The question
    text will get positioned to the left of the radio buttons when there is plenty of space, otherwise
    it will appear above the radio buttons. Set flexible to false if you want the radio buttons to
    use a minimum amount of space at all times. Passing in an integer is an advanced use-case and frankly isn’t of much value. See the source code for more info. The integer is used as a flex-grow value.
  • className (string) You can use this to apply custom CSS. You class name will be put on a <fieldset> element, which is the top-level element of this component.
  • ref (React ref) For advanced use-cases, you may need a reference to the DOM element itself. Pass in a React ref.
  • DOM attributes such as id, disabled, data-*, onClick, etc. These will get applied to a <fieldset> element.

FAQ

How do I change colors or other CSS styling?

The top-level DOM element that gets created by this component is <fieldset class="likertScale">.
You can override any styles by prefixing your rule with fieldset.likertScale. For example, let’s
say you want the radio button “dots” to have a light gray background with a dark green ring.

fieldset.likertScale .likertIndicator {
  border: thin solid darkGreen;
  background-color: lightGray;
}

You can pass in a className prop to the Likert segment that can likewise be utilized for styling. Allude to the custom styling model on Codepen.

I need admittance to the DOM component made by React. How could that be finished?

This isn’t normal, yet you might need to set spotlight on a Likert Scale after the page renders. This

is finished with React by means of refs. Either make your ref with React.createRef() or the useRef()

snare. You would then be able to pass your ref to the Likert part.

import React, { useRef } from 'react';
import Likert from 'react-likert-scale';

export default () => {
  const likertOptions = {
    question: "What is your opinion of the President’s performance?",
    responses: [
      { value: 1, text: "Abysmal" },
      { value: 2, text: "Poor" },
      { value: 3, text: "Average" },
      { value: 4, text: "Good" },
      { value: 5, text: "Excellent" }
    ]
  };

  const likertRef = useRef();

  return (
    <Likert {...likertOptions} ref={likertRef} />
  )
}

Can I pass in DOM attributes such as id, class, disabled, data-*, onClick, etc.?

Sure. They will be applied to the likert component’s top-level DOM element, <fieldset>.

<Likert {...likertOptions}
  id='Q1'
  className="myClass"
  onClick={() => {
    doThis();
    andThis();
  }}
/>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

%d bloggers like this: