Noteworthy Programming Masterpiece

    astro-rating

    0.2.6 • Public • Published

    Astro Rating

    Astro component that uses stars to display the rating of a product, post, comment, etc.

    Uses tailwindcss for custom class based styling and astro-icon to customize the star icons

    How to use

    Install package:

    npm i astro-rating

    Inside a .astro component/layout/page:

    Single Default Rating

    import { Rating } from 'astro-rating';
    
    //Create a rating
    <Rating total="90876" rate="2.5" max="5" />
    

    Examples

    Default

    Rating Component Example

    <Rating total="1279643" rate="5" max="5" />
    <Rating total="673923" rate="4.5" max="5" />
    <Rating total="90876" rate="3.5" max="5" />
    <Rating total="8634" rate="3" max="5" />
    <Rating total="178" rate="2.5" max="5" />
    <Rating total="39" rate="1.5" max="5" />
    <Rating total="8" rate="0.5" max="5" />
    <Rating total="0" rate="0" max="5" />
    

    Astro-Icon Support

    astro-rating uses astro-icon to deliver svgs for displaying stars. If you want to use different star icons read about the Icon name property and how it uses Iconify to fetch any popular icon from a bunch of the most popular icon packs.

    Phosphor

    Phosphor

    const phosphor = {
      rate: "8.5",
      max: "10",
      total: "32769",
      full: "ph:star-fill",
      half: "ph:star-half-fill",
      empty: "ph:star",
      starClass: "text-yellow-500 w-4 h-4"
    }
    
    <Rating {...phosphor}/>
    

    Material Design Icons

    Material Design

    const material_design = {
      rate: "2.5",
      max: "5",
      total: "72",
      full: "mdi:star",
      half: "mdi:star-half-full",
      empty: "mdi:star-outline",
      starClass: "text-yellow-500 w-4 h-4"
    }
    
    <Rating {...material_design}/>
    

    Custom Styling

    Use tailwindcss and the provided class props to customize the look of your rating

    Reversed Column

    const col-reverse = {
      rate="9.5" 
      max="10"
      total="872"
      class: "flex flex-col-reverse items-end",
    }
    
    <Rating {...col-reverse}/>
    

    Reversed Row

    const row-reverse = {
      rate="2.5" 
      max="5"
      total="178"
      class: "flex flex-row-reverse items-center gap-1",
    }
    
    <Rating {...row-reverse}/>
    

    Props

    Propname Type Description Default
    rate number|string 0 # between 0 and max
    max number|string 5 max number of stars
    total number|string total # of ratings
    full string star-full astro-icon Icon name prop representing a full star
    half string star-half astro-icon Icon name prop representing a half star
    empty string star-empty astro-icon Icon name prop representing a empty star
    totalClass string leading-none text-xs text-gray-300 class of the total ratings span element
    starsClass string flex items-center class to div that holds all stars
    starClass string h-4 w-4 class to div that surrounds the icons svg element
    ...attrs string {class:"flex items-center gap-1"} apply any html attribute like 'class', 'id', or 'style' to the rating container

    Advanced Rating

    If you need more control over your Rating component use a ARating component. ARating allows you to add attributes to any element inside your rating using an object.

    Examples

    ARating uses all the same props but puts them inside of any object so you can defined any attribute you would like for that element:

    ARating

    import { ARating } from 'astro-rating';
    
    const my_rating = {
      max: 5,
      rate: 2.5,
      full: "mdi:star",
      half: "mdi:star-half-full",
      empty: "mdi:star-outline",
      total: {
        text: "9876",
        class: "leading-none text-xs text-gray-300",
      },
      stars: {
        class: "flex items-center"
      },
      star: {
        class: "h-4 w-4 text-yellow-300"
      },
      id: "my-rating"
    }
    
    <ARating {...my_rating}/>
    
    Propname Type Description Default
    rate number|string 0 # between 0 and max
    max number|string 5 max number of stars
    full string star-full astro-icon Icon name prop representing a full star
    half string star-half astro-icon Icon name prop representing a half star
    empty string star-empty astro-icon Icon name prop representing a empty star
    total object {class:"leading-none text-xs text-gray-300"} Total ratings span element
    total.text string Total rating span text
    stars object {full: "star-full",half: "star-half",empty: "star-empty",class: "flex items-center"} Div with all star svgs
    star object {class:"flex items-center gap-1"} Star icon svg element
    ...attrs string {class:"flex items-center gap-1"} apply any html attribute like 'class', 'id', or 'style' to the rating container

    Install

    npm i astro-rating

    DownloadsWeekly Downloads

    160

    Version

    0.2.6

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    9

    Last publish

    Collaborators

    • brycerussell