index.js

import React, {Component} from 'react'
import FontAwesome from 'react-fontawesome'
const range = (range) => Array(range).fill().map((_, i) => i * i)

export const YELLOW = 'yellow'
export const GRAY = 'gray'
export const BLACK = 'black'
export const WHITE = 'white'

export const HEX_YELLOW = '#FBD330'
export const HEX_GRAY = '#A4A3A3'
export const HEX_BLACK = '#272525'
export const HEX_WHITE = '#ffffff'

export default class Rating extends Component {
  render () {
    const props = this.props
    let max = 5
    let half = (props.fill % 1) >= 0.5
    let firstRangeAmt = Math.floor(props.fill) || 0
    let firstRange = range(firstRangeAmt)
    let secondRangeAmt = (half) ? (max - firstRangeAmt - 1) : (max - firstRangeAmt)
    let secondRange = range(secondRangeAmt) || 0
    return (
      <span className={`rating-${this.props.scheme}`}>
        {firstRange.map((value, key) => (
          <FontAwesome key={key} name='star' style={{fontSize: props.size}} />
        ))}
        {(half) ? <FontAwesome name='star-half-full' style={{fontSize: props.size}} /> : null}
        {secondRange.map((value, key) => (
          <FontAwesome key={key} name='star-o' style={{fontSize: props.size}} />
        ))}
        <style jsx>{`
          .rating-yellow {
            color: ${HEX_YELLOW}
          }
          .rating-gray {
            color: ${HEX_GRAY}
          }
          .rating-black {
            color: ${HEX_BLACK}
          }
          .rating-white {
            color: ${HEX_WHITE}
          }
        `}</style>
      </span>
    )
  }
}