JSPM

react-native-stock-star-rating

1.0.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 87
  • Score
    100M100P100Q113739F
  • License MIT

☆ React Native stock star rating component with zero dependencies

Package Exports

  • react-native-stock-star-rating
  • react-native-stock-star-rating/index.tsx

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-stock-star-rating) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NPM VERSION NPM WEEKLY DOWNLOADS GITHUB STAR YOUTUBE VIEWS NPM LIFETIME DOWNLOADS

☆ React Native Stock Star Rating

🟢 React Native Stock Star Rating component with no dependencies

Light Weight Easy to use star rating.

  • Equivalent to React Native Stock Component
  • Use the color of your choice
  • Use bordered or filled star upon your choice
  • Works on all the platforms Android, Ios and Web in the same way
  • Zero dependencies

Compatibility

iOS Android Web Expo

🔌 Installation

$ npm install react-native-stock-star-rating

OR

$ yarn add react-native-stock-star-rating

😎 Displaying the rating

import { Rating } from 'react-native-stock-star-rating'

const App = () => {

  return(
    <Rating stars={4.7} maxStars={5} size={25} />
  )

};


Star Rating Demo

For Live Demo (Expo Snack)

⭐ Props for rating

Name Type Description Default
maxStars Number Number of stars to show (Optional) 5
stars Number Filled stars to show or value of rating 0
size Number Size of the star (Optional) 25
color String Use the color you want to give to the rating stars (Optional) #FFDF00
bordered boolean Set to true if you want bordered stars (Optional) false

😎 Star Rating Input

If you want to provide star rating input to capture the rating given by users, you can use this as below:

import { RatingInput } from 'react-native-stock-star-rating'

const App = () => {

  const [rating,setRating] = React.useState(0);
  

  return(
    <RatingInput 
        rating={rating} 
        setRating={setRating} 
        size={50}  
        maxStars={5} 
        bordered={false}  
    />
  )

};


Star Rating Input Demo

⭐ Props for rating input

Name Type Description Default
rating Number State variable to store the rating (Required) 0
setRating Function Function to update the rating state variable (Required) -
maxStars Number Number of stars to show (Optional) 5
stars Number Filled stars to show or value of rating 0
size Number Size of the star (Optional) 25
color String Use the color you want to give to the rating stars (Optional) #FFDF00
bordered boolean Set to true if you want bordered stars (Optional) false
onRating Function Callback function to execute after rating input is given (Optional) -

▶️ Watch Tutorial Video

Watch video

For Live Demo (Expo Snack)