StarRating

A basic StarRating component that should render nicely on any platform. Supports a good level of customization. You can customization Image component with the Props

Usage#

Basics#

For Selection#

import React, {FC} from 'react';
import {Body, StarRating} from 'qdmrncomponents';

const App: FC = () => {
  const defaultvalue = 2;
  const [value, setValue] = useState(defaultvalue);
  return (
    <Body>
      <StarRating
        half={true}
        default={value}
        update={(val) => {
          setValue(val);
        }}
        spacing={4}
        starSize={40}
        count={5}
        fullStar={require('./images/starFilled.png')}
        emptyStar={require('./images/starEmpty.png')}
        halfStar={require('./images/starHalf.png')}
      />
    </Body>
  );
};

For Display

import React, {FC} from 'react';
import {Body, StarRating} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body>
      <Stars
        display={3.67}
        spacing={8}
        count={5}
        starSize={40}
        fullStar={require('./images/starFilled.png')}
        emptyStar={require('./images/starEmpty.png')}
      />
    </Body>
  );
};

Reference#

Props#

here all the list of Props you can use for StarRating Component and it Inherits all TouchableOpacityProps Props, from React Native

half#

If false, disable halfstar value . type boolean

display#

If give a 3.2 in display props 3.2 star will be filled partially

default#

gives a value based on star display

update#

If update function return the star pressed value

starSize#

props give addition props to change the star size and default value is 40px

count#

props give addition props to change the star count and default value is 5

spacing#

props give addition props to change the Left and Right side of star image ,default value is 8

fullStar#

give a image path or custom componnent in fullstar props

emptyStar#

give a image path or custom componnent in emptyStar props

halfStar#

give a image path or custom componnent in halfStar props

Modes#

Selection Mode#

For when you want the component to respond to user input. Pressing the stars (or half stars) will call the function passed to the update property. This is the default mode. Use the default property to define a default rating on render. Use the half property to allow for half star input granularity. If a non-whole value (eg. 2.5) is passed into default and the half property isn't set to true, the default value will be truncated down to the nearest whole number.

Display Mode#

For when you want to display an aggregate value. The value displayed will remain static unless updated through display property. Passing any value passed into the display property will activate this mode and override the presence of any Selection Mode specific properties. Display mode defaults to a straight bar proportion - overridden by opacity property which maps star values to opacity as a percentage instead

props#

Prop	Type	Description	Required	Default
		Image of the form
		require('./path/to/image.png')	Yes	NA
`fullStar`	image or component	, Component may be any valid,
		square React component

`emptyStar`	image or component	see above	Yes	NA

`halfStar`	image or component	see above	No	null

`count`	int	the total number of stars	No	5

`starSize`	int	width,height of individual star	No	30

		(in Selection Mode) initial
`default`	0 <= default <= count	default rating, int x or x.5	NO	0
		(x.5 only works if half is true)

`update`	function	(in Selection Mode) function to
		be run on a given star selection
		selection ex: update={(val)=>	No	()=>{}
		this.setState({stars: val})}

`spacing`	number	pixel amount of separation	No	0
		between each star

`display`	0 <= display <= count	(passing any value sets to
		to be displayed eg. 3.6 (of 5),	No	null
		7.8 (of 10)

`opacity`	bool	(in Display Mode) displays
		star values as opacity	No	false
		percentages (0 - 1.0)

`half`	bool	(in Selection Mode) allows for	No	false
		half star ratings

`disabled`	bool	Disables onPress/buttons	No	false
		in Selection mode