@coder-shubh/feedback-star

A React Native component for implementing feedback star ratings easily.

Table of Contents

• Installation
• Usage
• Props
• License

Installation

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

Usage

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;

Props

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.

License

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.