react-native-stock-star-rating
v1.0.6
Published
☆ React Native stock star rating component with zero dependencies
Downloads
526
Maintainers
Readme
| | | | | | | --------------------------------------- | -------- | ---------- |---------- |---------- | | | | | |
🟢 React Native Stock Star Rating component with no dependencies
- 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} />
)
};
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
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}
/>
)
};
⭐ 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
For Live Demo
(Expo Snack)