bpk-component-star-rating-css

bpk-component-star-rating

Backpack rating star component.

Installation

npm install bpk-component-star-rating --save-dev

Usage

import React from 'react';
import BpkStarRating, {
  BpkStar,
  STAR_TYPES,
  BpkInteractiveStarRating,
  withInteractiveStarRatingState
} from 'bpk-component-star-rating';

const InteractiveStarRating = withInteractiveStarRatingState(BpkInteractiveStarRating);

export default () => (
  <div>
    <BpkStar
      type={STAR_TYPES.HALF}
    />
    <BpkStarRating
      rating={3.5}
      large
      ratingLabel={(rating, maxRating) => `Rated ${rating} out of ${maxRating} stars`}
    />
    <InteractiveStarRating
      id="large-star-rating"
      onRatingSelect={(rating) => console.log(rating)}
      getStarLabel={(rating, maxRating) => `${rating} out of ${maxRating} stars`}
    />
  </div>
);

Props

BpkStarRating

Property	PropType	Required	Default Value
ratingLabel	oneOfType(string, func)	true	-
className	string	false	null
large	bool	false	false
maxRating	number	false	5
rating	number	false	0
rounding	oneOf(ROUNDING_TYPES)	false	ROUNDING_TYPES.down

BpkStar

Property	PropType	Required	Default Value
type	oneOf(STAR_TYPES)	true	-
className	string	false	null
large	bool	false	false

withInteractiveStarRatingState()

Property	PropType	Required	Default Value
onRatingSelect	func	false	() => null

BpkInteractiveStarRating

Property	PropType	Required	Default Value
getStarLabel	func	true	-
id	string	true	-
className	string	false	null
hoverRating	number	false	0
large	bool	false	false
maxRating	number	false	5
onMouseLeave	func	false	() => null
onRatingHover	func	false	() => null
onRatingSelect	func	false	() => null
rating	number	false	0

BpkInteractiveStar

Property	PropType	Required	Default Value
label	bool	true	-
name	bool	true	-
type	oneOf(STAR_TYPES)	true	-
value	number	true	-
onClick	func	true	-
onMouseEnter	func	true	-
selected	bool	false	false

Theme Props

• starRatingFilledColor