Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
react-rating-tooltip
Advanced tools
React-rating-tooltip is a simple to use yet completely customizable component for getting use Rating/Reviews.
This requires [React.js and Prop-Types] to run.
npm i react-rating-tooltip
Install and import react-rating-tooltip and pass the props as per the below table
import React from 'react';
import Rating from 'react-rating-tooltip';
import 'font-awesome/css/font-awesome.min.css';
class SampleRating extends React.Component{
constructor(props) {
super(props);
this.state = {
max: 4,
defaultRating: 2,
counterPosition: 'left',
clearRating: true,
textPosition: 'right',
tooltipContent: ["Very Bad", "Bad", "Fair", "Good", "Very Good"],
ratingValue: ["Very Bad", "Bad", "Fair", "Good", "Very Good"],
starStyle: {
height: '28px',
backgroundColor: '#F2F2F2',
paddingLeft: '2px',
paddingRight: '2px',
color: '#F58220',
lineHeight: '28px',
marginLeft: '5px',
marginRight: '5px',
},
styleConfig: {
counterStyle: {
height: '28px',
backgroundColor: '#F58220',
paddingLeft: '12px',
paddingRight: '12px',
color: '#FFF',
lineHeight: '28px',
},
starContainer: {
fontSize: '24px',
backgroundColor: '#F2F2F2',
height: '28px',
},
statusStyle: {
height: '28px',
backgroundColor: '#F58220',
paddingLeft: '12px',
paddingRight: '12px',
color: '#FFF',
lineHeight: '28px',
minWidth: '100px',
fontSize: '18px',
textAlign: 'center',
},
tooltipStyle: {
fontSize: '14px',
padding: '5px',
}
}
}
}
handleChange = (RatingIndex, RatingValue) => {
console.log(RatingIndex, RatingValue);
}
render() {
return(
<Rating
max = {this.state.max}
defaultRating = {this.state.defaultRating}
counterPosition = {this.state.counterPosition}
clearRating = {this.state.clearRating}
textPosition = {this.state.textPosition}
tooltipContent = {this.state.tooltipContent}
ratingValue={this.state.ratingValue}
styleConfig = {this.state.styleConfig}
onChange={this.handleChange}
ActiveComponent={<i className="fa fa-star" style={this.state.starStyle} />}
InActiveComponent={<i className="fa fa-star-o" style={this.state.starStyle} />}
/>
);
}
}
export default SampleRating;
Details of the Props to be passed:
Prop-name | Type | Description |
---|---|---|
max | Number | Required . This determines the maximum number of Stars or Rating in the Component. |
defaultRating | Number | Default value - 0 . This determines the current number of selected Stars or Rating in the Component. |
counterPosition | String | Possible Values - ['left', 'right'] . This determines the position of the Rating Count in the Component. If not passed, Count will not be displayed. |
textPosition | String | Possible Values - ['left', 'right'] . This determines the position of the Rating Value (Status) in the Component. If not passed, Select value will not be displayed. |
clearRating | Boolean | Default Value - true . This determines whether the rating can be cleared/reset. If passed true, clicking again on the same rating count will clear the rating. |
disabled | Boolean | Default Value - false . This determines whether the rating can be enabled/disabled. If passed true, the rating component will be disabled and act as Read only component |
tooltipContent | Array | The Array of values as tooltip. Tooltips Values are matched to Rating count based on index. If not passed, tooltip will not be added |
ratingValue | Array | The Array of values for Rating count. Rating Values are matched to Rating count based on index. If not passed, Values will not be set |
onChange | Function | Required . A callback function which gets two arguements on every change of Rating - Rating count, Rating Value (if passed) |
ActiveComponent | React/HTML Element | Required . The component or element to be considered as Selected rating |
InActiveComponent | React/HTML Element | Required . The component or element to be considered as Left-out rating |
styleConfig | Object | See the below table for more details . Its a Nested object with specific styles for specific parts of the Component |
Details of the styleConfig:
Prop-name | Type | Description |
---|---|---|
counterStyle | Object | CSS styles to be applied to the Part of the component where the Rating count is displayed |
starContainer | Object | CSS styles to be applied to the Part of the component container where the stars/Rating is displayed |
statusStyle | Object | CSS styles to be applied to the Part of the component where the Rating value/status is displayed |
tooltipStyle | Object | CSS styles to be applied to the tooltips of the component |
Please check the example for styleConfig
{
max: PropTypes.number.isRequired,
defaultRating: PropTypes.number,
counterPosition: PropTypes.oneOf(['left', 'right']),
clearRating: PropTypes.bool,
disabled: PropTypes.bool,
textPosition: PropTypes.oneOf(['left', 'right']),
tooltipContent: PropTypes.array,
ratingValue: PropTypes.array,
styleConfig: PropTypes.shape({
counterStyle: PropTypes.object,
starContainer: PropTypes.object,
statusStyle: PropTypes.object,
tooltipStyle: PropTypes.object,
}),
onChange: PropTypes.func.isRequired,
ActiveComponent: PropTypes.oneOfType([
PropTypes.node,
PropTypes.element
]).isRequired,
InActiveComponent: PropTypes.oneOfType([
PropTypes.node,
PropTypes.element
]).isRequired,
}
{
clearRating: true,
disabled: false,
defaultRating: 0,
styleConfig: {
counterStyle: {
height: '28px',
backgroundColor: '#F58220',
paddingLeft: '12px',
paddingRight: '12px',
color: '#FFF',
lineHeight: '28px',
},
starContainer: {
fontSize: '24px',
backgroundColor: '#F2F2F2',
height: '28px',
},
statusStyle: {
height: '28px',
backgroundColor: '#F58220',
paddingLeft: '12px',
paddingRight: '12px',
color: '#FFF',
lineHeight: '28px',
minWidth: '100px',
fontSize: '18px',
textAlign: 'center',
},
tooltipStyle: {
fontSize: '14px',
padding: '5px',
}
}
}
You are welcome to raise issues and PRs in the repository
FAQs
React Star Rating/Review Component with tooltip support
The npm package react-rating-tooltip receives a total of 1,447 weekly downloads. As such, react-rating-tooltip popularity was classified as popular.
We found that react-rating-tooltip demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.