React Styled Components Star Rating Percent

let html const React = require('react'); const { renderToString } = require('react-dom/server'); const _styled = require('styled-components') const styled = _styled.default const { css, keyframes } = _styled const render = component => { const sheet = new _styled.ServerStyleSheet() html = renderToString(sheet.collectStyles(component)) return sheet.getStyleTags() + html }

const Rating = styled(props => <div {...props}> <Stars count={props.stars} /> <div>{props.ratings}</div> </div> )` display: flex; flex-direction: row; ` const Stars = ({ count }) => <EmptyStars><FilledStars percent={count/5} /></EmptyStars> const EmptyStars = styled.div` height: 16px; width: 90px; background-position: 0 0; /* clear stars */ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiMzI2MzFjNi1lNzJkLTQ4NzUtYmI1ZC1jOWQ0YWVmZTc3MzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjMxQzFGNzAyOTIzMTFFN0I4QTZFMDVENjRCODA1MjYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjMxQzFGNkYyOTIzMTFFN0I4QTZFMDVENjRCODA1MjYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3YjA4MzM1OS1jMmM1LTQ4MDYtYjA3Ni1jNDQ2YzllMDM3YzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6YjMyNjMxYzYtZTcyZC00ODc1LWJiNWQtYzlkNGFlZmU3NzM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+EI140AAAAr9JREFUeNqsVU1vElEUvTPMDGEYGJgEDF0YE0mQmHRnAqkr7cIEY0LsxsT0D7iqK/+IP6FxY9Ro3XYj3WjiwgqFGCVupENFUBigAQbvnY86DMPQFG9yc7kf7/DeebwD865UAh8LoX9Av4E+8Bq4ubFhRBb87SHHcdcpLpnzBWLQd2KyTJ93rPxCQHcCgUBWURSQZTlL+UWBHkuSBKIowloqZeR+QBz6M4vUmbogCJvJRAKCwSAQ4KVkclNtNvewN3YOlg4OBkj4AxvoeSKR4FmWPSMnFotBOBwGJNuopdNpiEQiheFwCKOxiaWq6gjDlrHGuv576C+vZTKsbJILDMMAcmRE26bTKUwmE/jT7UKlUtGxVMTdvHZyRMl2tVbTNU0DnueNnThBbPB+v2+DbFvr5sjepebnclmnb11knw4PbZBdv1uj5vtWq2Ucw21dPBL13SBeQMTsOpHuBUTkU9+a8wVaD7CsSEDER6fTgaNq1YjGMNalcFi0wOZ24LQch0TTFSPxgEfcx9pTjI/i8fgt+mFGolHoaVoO6x/9dpSn2/pWr9dxcRHz2+gvKLbb7WK5UqmDeeT8sqOl8fqfYKS39crVozzbOD6mfnruhX9/Ayvp0eW70/PpkZSC/6NH0hqsrkchBbKChOdTYEU9MncDVvTVIyLbU4+Qm4Jy9V/h11eAXgPeuvWILgEJd+hRBngnO6E4RsfbVa5gTYYCOF7OSQ3O9Ii1pGALizrpWiiKHrG+1+VUpz7N0Tytw93M65F6BPopPavRYqc+zS3VI/ULDo29d0Ru9M+rR6ddbxCjvkCPOC89EvhZom0TzOuw9Wjsq0dCEERGN4GGPYCfP8xIOdWp76VHbqAcDsIQn+eJCtBswH5fg/sUKac69WluGVCe/jhwYX2gwYweUU51649luR51f4OvHln9OT36K8AAzQ8WEP+HzGwAAAAASUVORK5CYII=) repeat-x; ` const FilledStars = styled.span` height: inherit; display: block; background: inherit; background-position: 0 -16px; /* filled stars */ width: ${props => Math.round(props.percent * 100)}%; ` render( <Rating stars={4.2} ratings='(50)' /> )