# @perrychi/mark-score

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

Latest version **0.0.8** (published 2022-10-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install @perrychi/mark-score
pnpm add @perrychi/mark-score
yarn add @perrychi/mark-score
bun add @perrychi/mark-score
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2022-10-06 |
| First published | 2022-10-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Perry Chi |
| Maintainers | perrychi |
| Keywords | scoring, mark score, rate, rating, star rate, star rating, star scoring, star level |

## Links

- npm: https://www.npmjs.com/package/@perrychi/mark-score
- Repository: https://github.com/PerryChi/mark-score
- Homepage: https://github.com/PerryChi/mark-score#readme
- Issues: https://github.com/PerryChi/mark-score/issues
- npm.io page: https://npm.io/package/@perrychi/mark-score

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 0.0.8 (latest) — 2022-10-06
- 0.0.7 — 2022-10-06
- 0.0.6 — 2022-10-06
- 0.0.5 — 2022-10-06
- 0.0.4 — 2022-10-06
- 0.0.3 — 2022-10-05
- 0.0.2 — 2022-10-05
- 0.0.1 — 2022-10-05

## README

# @perrychi/mark-score

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

## Interaction

![demo demo](./image/interaction.gif)

## 📦 Install

```bash
npm install @perrychi/mark-score --save
```

```bash
yarn add @perrychi/mark-score
```

## 🔨 Usage

### A simple example

```jsx
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

```jsx
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

![demo demo](./image/complex-example.jpg)

## 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 | -       |

---
_Source: https://npm.io/package/@perrychi/mark-score · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._