https://github.com/mmusaib/react-native-stock-star-rating
☆ React Native stock star rating component with zero dependencies
https://github.com/mmusaib/react-native-stock-star-rating
react react-native react-native-star-rating react-native-stock-star-rating star starrating
Last synced: about 1 month ago
JSON representation
☆ React Native stock star rating component with zero dependencies
- Host: GitHub
- URL: https://github.com/mmusaib/react-native-stock-star-rating
- Owner: mmusaib
- License: mit
- Created: 2022-09-19T15:29:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T16:02:14.000Z (9 months ago)
- Last Synced: 2025-03-25T09:05:57.822Z (2 months ago)
- Topics: react, react-native, react-native-star-rating, react-native-stock-star-rating, star, starrating
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-stock-star-rating
- Size: 14.6 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
| | | | | |
| --------------------------------------- | -------- | ---------- |---------- |---------- |
|  |  |  |  | 
☆ 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
```sh
$ npm install react-native-stock-star-rating
```
OR
```sh
$ yarn add react-native-stock-star-rating
```
# 😎 Displaying the rating
```jsx
import { Rating } from 'react-native-stock-star-rating'
const App = () => {
return(
)
};
```
Star Rating Demo
For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)
# ⭐ 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:
```jsx
import { RatingInput } from 'react-native-stock-star-rating'
const App = () => {
const [rating,setRating] = React.useState(0);
return(
)
};
```
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
[](https://youtu.be/eNCsP_YhGBk&t=15s)
For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-stock-star-rating)