star-product-rating/dist/index.mjs

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

import e,{useState as t}from"react";import l from"prop-types";const r=({onClick:t,full:a,color:o,size:s})=>(r.propTypes={onClick:l.func,full:l.bool,color:l.string,size:l.number},e.createElement("div",{onClick:t,onMouseOver:t,style:{width:`${s}px`,height:`${s}px`,cursor:"pointer"}},a?e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:o,stroke:o},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:o},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"})))),a=({starLength:o=5,color:s="#000000",size:n=24,disabled:i=!1,starStyle:c={display:"flex",alignItems:"center",gap:"2px"},starTextStyle:p={color:s},messages:m=["Terrible","Bad","Okay","Good","Amazing"],defaultRating:g=1,newRating:d})=>{a.propTypes={starLength:l.number,color:l.string.isRequired,size:l.number.isRequired,starStyle:l.object,starTextStyle:l.object,messages:l.array,defaultRating:l.number.isRequired,newRating:l.func.isRequired,disabled:l.bool};const u=Array.from({length:o}),[y,h]=t(u),[f,w]=t(g);return e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"10px"}},e.createElement("div",{style:c},y.map(((t,l)=>e.createElement(r,{key:l,onClick:()=>((e,t)=>{t||(w(e),d?d(e):w(e))})(l+1,i),full:f>=l+1,color:s,size:n})))),e.createElement("p",{style:p},m.length===o?m[f?f-1:y-1]:f))};export{a as StarRating};
//# sourceMappingURL=index.mjs.map