star-product-rating/dist/index.js

A simple react component library that enable react developers easily use, edit, tweak and style a rating functionality on the go for products or services in an e-commerce web-application or mobile application

"use strict";var e=require("react"),t=require("prop-types");const l=({onClick:r,full:a,color:s,size:n})=>(l.propTypes={onClick:t.func,full:t.bool,color:t.string,size:t.number},e.createElement("div",{onClick:r,onMouseOver:r,style:{width:`${n}px`,height:`${n}px`,cursor:"pointer"}},a?e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:s,stroke:s},e.createElement("path",{d:"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"})):e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:s},e.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"{2}",d:"M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"})))),r=({starLength:a=5,color:s="#000000",size:n=24,disabled:i=!1,starStyle:o={display:"flex",alignItems:"center",gap:"2px"},starTextStyle:c={color:s},messages:p=["Terrible","Bad","Okay","Good","Amazing"],defaultRating:g=1,newRating:u})=>{r.propTypes={starLength:t.number,color:t.string.isRequired,size:t.number.isRequired,starStyle:t.object,starTextStyle:t.object,messages:t.array,defaultRating:t.number.isRequired,newRating:t.func.isRequired,disabled:t.bool};const d=Array.from({length:a}),[m,y]=e.useState(d),[h,w]=e.useState(g);return e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"10px"}},e.createElement("div",{style:o},m.map(((t,r)=>e.createElement(l,{key:r,onClick:()=>((e,t)=>{t||(w(e),u?u(e):w(e))})(r+1,i),full:h>=r+1,color:s,size:n})))),e.createElement("p",{style:c},p.length===a?p[h?h-1:m-1]:h))};exports.StarRating=r;
//# sourceMappingURL=index.js.map