@perrychi/mark-score
v0.0.8
Published
A React-based component for scoring by selecting the number of stars.
Downloads
10
Maintainers
Readme
@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 | - |