# rc-ratings

> React-based rating component empowered by styled-components

Latest version **0.2.2** (published 2022-08-22) · 0 weekly downloads

## Install

```sh
npm install rc-ratings
pnpm add rc-ratings
yarn add rc-ratings
bun add rc-ratings
```

## 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.2.2 |
| Published | 2022-08-22 |
| First published | 2022-08-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 49.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | suraj-codes |
| Maintainers | surajcodes |
| Keywords | rating, react, component, react-component, styled-components |

## Links

- npm: https://www.npmjs.com/package/rc-ratings
- Repository: https://github.com/suraj-codes/react-rating
- Issues: https://github.com/suraj-codes/react-rating/issues
- npm.io page: https://npm.io/package/rc-ratings

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.2 (latest) — 2022-08-22
- 0.2.1 — 2022-08-22
- 0.2.0 — 2022-08-19

## README

# React Ratings

React Ratings is a [React](https://github.com/facebook/react) rating component built with [StyledComponents](https://github.com/styled-components/styled-components) 💅

## Installation

You can install `rc-ratings` component using the **yarn** or **npm** package manager:

```bash
yarn add rc-ratings
npm install rc-ratings
```

### Dependencies

The `rc-ratings` component [peer depends](https://docs.npmjs.com/files/package.json#peerdependencies) on the [React](http://facebook.github.io/react/) library.

You can install React using _yarn_:

```bash
yarn add --save react react-dom
```

## Usage

Import Rating Component

```javascript
import Rating from "rc-ratings";
```

Start using it:

```jsx
<Rating />
```

Pass some config props:

```jsx
<Rating animateOnHover disableAnimation initialRate={3} stop={10} />
```

## Properties

| Property           | Type            | Default    | Description                                          |
| ------------------ | --------------- | ---------- | ---------------------------------------------------- |
| `animateOnHover`   | _Boolean_       | false      | Whether to animate rate hovering or not.             |
| `disableAnimation` | _Boolean_       | false      | Disable stars animation onClick or onHover.          |
| `emptyRate`        | _React Element_ | Empty Star | React Element                                        |
| `fractions`        | _Number_        | 1          | Number of equal parts that make up a whole symbol.   |
| `fullRate`         | _React Element_ | Full Star  | React element                                        |
| `initialRate`      | _Number_        | 0          | Initial rate value.                                  |
| `readonly`         | _Boolean_       | false      | Whether the rating can be modified or not.           |
| `start`            | _Number_        | 0          | Range starting value.                                |
| `step`             | _Number_        | 1          | Step increment (must be between _start_ and _stop_). |
| `stop`             | _Number_        | 5          | Range stop value.                                    |

## Callbacks

| Callback   | Type       | Parameters                       | Description                                                                               |
| ---------- | ---------- | -------------------------------- | ----------------------------------------------------------------------------------------- |
| `onChange` | _Function_ | rate: _Number_                   | Called when the selected rate is changed.                                                 |
| `onClick`  | _Function_ | (rate: _Number_, event: _Event_) | Called when a rate is clicked.                                                            |
| `onRate`   | _Function_ | rate: _Number_ or _undefined_    | Called when a rate is entered or left. When a rate is left it is called with `undefined`. |

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