@perrychi/mark-score

@perrychi/mark-score

A React-based component for scoring by selecting the number of stars.

Interaction

Install

npm install @perrychi/mark-score --save

yarn add @perrychi/mark-score

Usage

A simple example

import React from 'react';
import MarkScore from '@perrychi/mark-score';

function App() {
  const handleChange = (score) => {
    console.log('This is the score: ', score);
  }
  return (
    <div className="App">
      <MarkScore onChange={handleChange} />
    </div>
  );
}

export default App;

A complex example

import React from 'react';
import MarkScore from '@perrychi/mark-score';

function App() {
  const handleChange = (score) => {
    console.log('This is the score: ', score);
  }
  return (
    <div className="App">
      <MarkScore
        {...{
          starCount: 6,
          allowHalf: true,
          value: 3.5,
          onChange: handleChange,
          size: 'm',
          style: {
            color: '#e1251b'
          }
        }}
      />
    </div>
  );
}

export default App;

UI display

Props