2.0.2 • Published 2 months ago
@coder-shubh/feedback-star v2.0.2
You can install the @coder-shubh/feedback-star
package using npm or yarn:
# with npm
npm i @coder-shubh/feedback-star react-native-vector-icons
# with yarn
yarn add @coder-shubh/feedback-star react-native-vector-icons
import React from "react";
import { View, StyleSheet } from "react-native";
import { FeedBackStar } from "@coder-shubh/feedback-star";
const App = () => {
const handleStarPress = (rating: number) => {
console.log("Selected rating:", rating);
};
return (
<View style={styles.container}>
<FeedBackStar
initialRating={3}
onStarPress={handleStarPress}
starSize={40}
selectedColor="#ffb300"
unselectedColor="#000"
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F0F1F5",
},
});
export default App;
Prop | Type | Description | Default Value |
---|---|---|---|
initialRating | number | The initial rating value. | 0 |
onStarPress | (rating: number) => void | A callback function triggered when a star is pressed. | - |
starSize | number | The size of each star. | 52 |
selectedColor | string | The color of selected stars. | '#ffb300' |
unselectedColor | string | The color of unselected stars. | '#000' |
In this table:
Prop
: Name of the prop.
Type
: Type of the prop.
Description
: Description of what the prop does.
Default Value
: Default value of the prop, if any.
This project is licensed under the MIT License - see the LICENSE file for details.
In this version, I've added:
- Title and badges centered at the top.
- Descriptive text centered.
- Table of Contents for easy navigation.
- Stylish section headings.
- Usage code block with syntax highlighting.
- More visual appeal with horizontal lines and section separators.
Feel free to adjust the styles, colors, or any other aspects to better suit your preferences or project branding.