@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

Prop	Description	Type	Default
starCount	Total number of stars	number	5
allowClear	Whether to allow clearing the value when the last clicked star is clicked again	boolean	true
allowHalf	Whether to allow half stars	boolean	false
disabled	Is it possible to operate	boolean	false
value	The current value	number	0
onChange	The callback when the score value changes, the latest score value will be passed to the callback	(value) => {}	-
size	xxs | xs | s | m | l | xl | xxl | xxxl | xxxxl	string	m
style	The custom style object	CSSProperties	-