bpk-component-rating

Backpack rating component.

Installation

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

Usage

import React from 'react';
import BpkRating, { RATING_SIZES, RATING_SCALES, RATING_TYPES } from 'bpk-component-rating';

export default () => (
  <BpkRating
    ariaLabel="9 Excellent would recommend"
    title="Excellent"
    subtitle="It was almost perfect!"
    value={9}
  />

  // Large rating
  <BpkRating
    ariaLabel="9 Excellent would recommend"
    title="Excellent"
    subtitle="It was almost perfect!"
    size={RATING_SIZES.large}
    value={9}
  />

  // Pill-shaped rating
  <BpkRating
    ariaLabel="9 Excellent would recommend"
    title="Excellent"
    subtitle="It was almost perfect!"
    type={RATING_TYPE.pill}
    value={9}
  />

  // 0-5 scale
  <BpkRating
    ariaLabel="2 It was ok I guess"
    title="Meh"
    value={2}
    ratingScale={RATING_SCALES.zeroToFive}
  />
);

Props

Property	PropType	Required	Default Value
ariaLabel	string	true	-
title	string	true	-
value	number	true	-
className	string	false	null
ratingScale	oneOf(RATING_SCALES)	false	RATING_SCALES.zeroToTen
size	oneOf(RATING_SIZES)	false	RATING_SIZES.base
subtitle	string	false	null
type	oneOf(RATING_TYPES)	false	RATING_TYPES.default
vertical	boolean	false	false

Theme props

• ratingHighColor
• ratingHighTextColor
• ratingMediumColor
• ratingMediumTextColor
• ratingLowColor