{"id":41782,"library":"pretty-rating-react","title":"pretty-rating-react","description":"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.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/Proskynete/pretty-rating-react","tags":["javascript","Typescript","Ts","React","Reactjs","Rating","Rating Component","FontAwesome","typescript"],"install":[{"cmd":"npm install pretty-rating-react","lang":"bash","label":"npm"},{"cmd":"yarn add pretty-rating-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add pretty-rating-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core FontAwesome library required for SVG icons","package":"@fortawesome/fontawesome-svg-core","optional":false},{"reason":"Provides default star icons (faStar, faStarHalfAlt)","package":"@fortawesome/free-solid-svg-icons","optional":false},{"reason":"React component wrapper for FontAwesome icons","package":"@fortawesome/react-fontawesome","optional":false},{"reason":"Peer dependency for React 17 or 18","package":"react","optional":false},{"reason":"Peer dependency for React 17 or 18","package":"react-dom","optional":false}],"imports":[{"note":"This is a named export, not a default export.","wrong":"import PrettyRating from 'pretty-rating-react'","symbol":"PrettyRating","correct":"import { PrettyRating } from 'pretty-rating-react'"},{"note":"CommonJS require must destructure the named export.","wrong":"const PrettyRating = require('pretty-rating-react')","symbol":"PrettyRating (CommonJS)","correct":"const { PrettyRating } = require('pretty-rating-react')"},{"note":"Types are included in the package; use 'import type' for type-only imports.","wrong":"","symbol":"TypeScript types","correct":"import type { PrettyRatingProps } from 'pretty-rating-react'"}],"quickstart":{"code":"import React from 'react';\nimport { PrettyRating } from 'pretty-rating-react';\n\nfunction App() {\n  return (\n    <div>\n      <PrettyRating value={3.5} />\n      <PrettyRating value={4} max={10} />\n      <PrettyRating\n        value={2.7}\n        icons={{\n          complete: 'fa-star',\n          half: 'fa-star-half-alt',\n          empty: 'fa-star-o'\n        }}\n      />\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Demonstrates basic usage of the PrettyRating component with different values, custom max, and custom icon names."},"warnings":[{"fix":"Use valid FontAwesome icon names like 'fa-star' or icon objects from @fortawesome/free-solid-svg-icons.","message":"Custom icons must be provided as FontAwesome icon names (strings) or FontAwesome icon objects, not arbitrary React components.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure value <= max, or adjust max prop accordingly.","message":"The '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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import { PrettyRating } from 'pretty-rating-react' (named export) and remove old imports.","message":"Previous versions (v1.x) had a different API that required importing separate components; v2 unified into a single PrettyRating component.","severity":"deprecated","affected_versions":">=2.0.0"},{"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)).","message":"The library relies on FontAwesome for icons; if FontAwesome is not properly configured, icons may not render or may cause build errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to React 17 or 18.","message":"React 16 support was dropped in v2.0.0; peer dependencies now require React 17 or 18.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'activ':48 'altern':64 'api':57 'base':72 'box':44 'compar':62 'compon':61,86 'custom':35 'display':23,73 'empti':32 'focus':66 'fontawesom':25,87 'half':30 'icon':26,33,36,71 'icon-bas':70 'input':78 'interact':76 'javascript':79 'librari':13,46 'maintain':49 'numer':18 'pretti':2,6 'pretty-rating-react':1,5 'provid':54 'rate':3,7,19,77,84,85 'rather':74 'react':4,8,12,82 'reactj':83 'regular':51 'releas':52 'select':37 'simpl':56 'simplic':68 'singl':60 'small':11 'state':34 'support':28 'transform':16 'ts':81 'type':40 'typescript':39,80,88 'use':24 'v2.2.0':14 'via':58 'visual':22 'whole':29","created_at":"2026-06-04T18:54:05.270895+00:00","updated_at":"2026-06-04T18:54:05.270895+00:00","problems":[{"fix":"Run: npm install @fortawesome/react-fontawesome","cause":"Missing peer dependency @fortawesome/react-fontawesome.","error":"Module not found: Can't resolve '@fortawesome/react-fontawesome'"},{"fix":"Change to: import { PrettyRating } from 'pretty-rating-react';","cause":"Using a default import instead of a named import.","error":"Attempted import error: 'PrettyRating' is not exported from 'pretty-rating-react'."},{"fix":"Add: import { library } from '@fortawesome/fontawesome-svg-core'; import { faStar, faStarHalfAlt } from '@fortawesome/free-solid-svg-icons'; library.add(faStar, faStarHalfAlt);","cause":"FontAwesome library not initialized or icons not added to the library.","error":"Uncaught TypeError: Cannot read property 'icon' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/Proskynete/pretty-rating-react#readme","github":"https://github.com/Proskynete/pretty-rating-react","docs":null,"changelog":null,"pypi":null,"npm":"pretty-rating-react","openapi_spec":null,"status_page":null,"smithery":null,"categories":["ui"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}