Registry / ui / pretty-rating-react

pretty-rating-react

library2.2.0jsnpmunverified

pretty-rating-react is a small React library (v2.2.0) that transforms a numeric rating into a visual display using FontAwesome icons. It supports whole, half, and empty icon states, custom icon selection, and TypeScript types out of the box. The library is actively maintained with regular releases and provides a simple API via a single <PrettyRating> component. Compared to alternatives, it focuses on simplicity and icon-based display rather than interactive rating input.

npm install pretty-rating-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · PRETTY-RATING-REAC

pretty-rating-react

uijavascriptv2.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PrettyRating

✓ import { PrettyRating } from 'pretty-rating-react'

✗ import PrettyRating from 'pretty-rating-react'

This is a named export, not a default export.

PrettyRating (CommonJS)

✓ const { PrettyRating } = require('pretty-rating-react')

✗ const PrettyRating = require('pretty-rating-react')

CommonJS require must destructure the named export.

TypeScript types

✓ import type { PrettyRatingProps } from 'pretty-rating-react'

Types are included in the package; use 'import type' for type-only imports.

Demonstrates basic usage of the PrettyRating component with different values, custom max, and custom icon names.

import React from 'react'; import { PrettyRating } from 'pretty-rating-react'; function App() { return ( <div> <PrettyRating value={3.5} /> <PrettyRating value={4} max={10} /> <PrettyRating value={2.7} icons={{ complete: 'fa-star', half: 'fa-star-half-alt', empty: 'fa-star-o' }} /> </div> ); } export default App;

Debug

Known issues

gotchaCustom icons must be provided as FontAwesome icon names (strings) or FontAwesome icon objects, not arbitrary React components.

fix

Use valid FontAwesome icon names like 'fa-star' or icon objects from @fortawesome/free-solid-svg-icons.

affects: >=2.0.0

gotchaThe 'value' prop accepts integers or floats, but values greater than 'max' will render all icons as complete, potentially causing overflow if max is not set appropriately.

fix

Ensure value <= max, or adjust max prop accordingly.

affects: >=1.0.0

deprecatedPrevious versions (v1.x) had a different API that required importing separate components; v2 unified into a single PrettyRating component.

fix

Use import { PrettyRating } from 'pretty-rating-react' (named export) and remove old imports.

affects: >=2.0.0

gotchaThe library relies on FontAwesome for icons; if FontAwesome is not properly configured, icons may not render or may cause build errors.

fix

Ensure @fortawesome/fontawesome-svg-core, @fortawesome/free-solid-svg-icons, and @fortawesome/react-fontawesome are installed and that the FontAwesome library is added (e.g., import { library } from '@fortawesome/fontawesome-svg-core'; library.add(faStar, faStarHalfAlt)).

affects: >=1.0.0

breakingReact 16 support was dropped in v2.0.0; peer dependencies now require React 17 or 18.

fix

Upgrade to React 17 or 18.

affects: >=2.0.0

Errors

Common errors & fixes

Module not found: Can't resolve '@fortawesome/react-fontawesome'

Missing peer dependency @fortawesome/react-fontawesome.

fix

Run: npm install @fortawesome/react-fontawesome

Attempted import error: 'PrettyRating' is not exported from 'pretty-rating-react'.

Using a default import instead of a named import.

fix

Change to: import { PrettyRating } from 'pretty-rating-react';

Uncaught TypeError: Cannot read property 'icon' of undefined

FontAwesome library not initialized or icons not added to the library.

fix

Add: import { library } from '@fortawesome/fontawesome-svg-core'; import { faStar, faStarHalfAlt } from '@fortawesome/free-solid-svg-icons'; library.add(faStar, faStarHalfAlt);

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

@fortawesome/fontawesome-svg-corerequiredCore FontAwesome library required for SVG icons

@fortawesome/free-solid-svg-iconsrequiredProvides default star icons (faStar, faStarHalfAlt)

@fortawesome/react-fontawesomerequiredReact component wrapper for FontAwesome icons

reactrequiredPeer dependency for React 17 or 18

react-domrequiredPeer dependency for React 17 or 18

Agent activity

31 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Proskynete/pretty-rating-react ↗

packagepretty-rating-react ↗

homepagehttps://github.com/Proskynete/pretty-rating-react#readme ↗