Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

simple-rating-stars

1.0.1 • Public • Published

Simple Rating Stars

Known Vulnerabilities

A display-only React component to render basic star-ratings, using SVG elements.

In Action

Edit simple-rating-stars test

Install

npm install simple-rating-stars

Usage

import Stars from 'simple-rating-stars';
 
const SomeStars = () => (
  <Stars
    stars={4}
    outOf={5}
    full={'#d00'}
    empty={'#E1F1FF'}
    stroke={'#369'}
  />
);

API

  • stars (required): A number from 0 to outOf. The component does not currently handle fractional stars.
  • outOf (required): A number, 2 or greater. The component does not currently handle fractional stars.
  • full: A hexadecimal color1 used as an active/colored star.2 If omitted, the component throws an Error in the console but the "full" star will render with a default orange color.
  • empty: A hexadecimal color1 used as an inactive/empty star.2 If omitted, the component throws an Error in the console but the "empty" star will render with a default, white.
  • stroke: A hexadecimal color1; the outline color of the star3. If omitted, the component throws an Error in the console but the star's "stroke" will render in black.
  1. CSS hex colors must be text strings beginning with an octothorpe; see example usage above. They may be 3- or 6-characters, and are case-insensitive.
  2. The stars are SVG elements; depending on the numbers passed, the color indicated in either full or empty is passed to the SVG element's "fill" property.
  3. See fn 2. The stroke prop is simply passed through to the SVG element's "stroke" property.

Errors

Most errors are caught by the component's propTypes. Certain logical errors (requesting "5 stars out of 3"; setting the maximum outOf to a number less than 2) will return a string message in the app. Incorrect hexadecimal color values will throw Errors in the browser console and the component's defaultProps colors (orange, black, white) will be substituted as explained above.

Notes

  • The SVG stars are rendered using Array.prototype.map(); array indexes are used as React keys. This is a poor habit, but I have yet to write a test that surfaces errors based on this anti-pattern, even while adding and removing stars in a dynamic React app.
  • That said, I still need to integrate testing and a small test app into the package.

install

npm i simple-rating-stars

Downloadsweekly downloads

10

version

1.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability