Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-star-rating-controlled-component

Package Overview
Dependencies
5
Maintainers
1
Versions
2
Issues
File Explorer

Advanced tools

react-star-rating-controlled-component

React component for star (or any other icon based) ratings

    1.0.1latest

Version published
Maintainers
1
Yearly downloads
10,939
increased by108.48%

Weekly downloads

Readme

Source

react-star-rating-controlled-component

npm version Dependency Status Download Count

This is a fork of Dmitri Voronianski's react-star-rating-component, a "Tiny React.js component for star (or any other icon based) ratings."

This version is updated to be fully controlled, i.e. it does not maintain state internally and just renders its props. This makes it easy to operate with React-Redux.

With this change, the componentWillMount function has been removed. componentWillMount will no longer be supported with React 17. And lastly, the packages in package.json have been brought up to date.

Install

npm install react-star-rating-controlled-component --save

or, if you use yarn:

yarn add react-star-rating-controlled-component

Demo Here

Props

<StarRatingComponent name={String} /* name of the radio input, it is required */ value={Number} /* number of selected icon (`0` - none, `1` - first). *Also required* */ starCount={Number} /* number of icons in rating, default `5` */ onStarClick={Function(nextValue, prevValue, name)} /* on icon click handler */ onStarHover={Function(nextValue, prevValue, name)} /* on icon hover handler */ onStarHoverOut={Function(nextValue, prevValue, name)} /* on icon hover out handler */ renderStarIcon={Function(nextValue, prevValue, name)} /* it should return string or react component */ renderStarIconHalf={Function(nextValue, prevValue, name)} /* it should return string or react component */ starColor={String} /* color of selected icons, default `#ffb400` */ emptyStarColor={String} /* color of non-selected icons, default `#333` */ editing={Boolean} /* is component available for editing, default `true` */ />

Examples

React-Redux

import React from 'react' import ReactDOM from 'react-dom' import { createStore } from 'redux' import { connect, Provider } from 'react-redux' import StarRatingComponent from '../' const SET_RATING_ACTION = 'SET_RATING_ACTION' const reducer = (state, action) => { switch (action.type) { case SET_RATING_ACTION: return { ...state, rating: action.rating } default: return state } } const preloadedState = { rating: 3 } const store = createStore(reducer, preloadedState) const createSetRatingAction = rating => ({ type: SET_RATING_ACTION, rating: rating }) const Component = props => <div style={{ marginLeft: 20 }}> <h3>React-Redux:</h3> <div style={{ fontSize: 24 }}> <StarRatingComponent name="reduxStarRating" value={props.rating} onStarClick={props.createSetRatingAction} /> </div> </div> const mapStateToProps = state => ({ rating: state.rating }) const Container = connect(mapStateToProps, { createSetRatingAction })(Component) ReactDOM.render( <Provider store={store}> <Container /> </Provider> , document.getElementById('redux-app') )

React only

import React from 'react'; import ReactDOM from 'react-dom'; import StarRatingComponent from 'react-star-rating-controlled-component'; class App extends React.Component { constructor() { super(); this.state = { rating: 1 }; } onStarClick(nextValue, prevValue, name) { this.setState({rating: nextValue}); } render() { const { rating } = this.state; return ( <div> <h2>Rating from state: {this.state.rating}</h2> <StarRatingComponent name="rate1" starCount={10} value={rating} onStarClick={this.onStarClick.bind(this)} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );

More in examples folder.


MIT Licensed

Keywords

FAQs

What is react-star-rating-controlled-component?

React component for star (or any other icon based) ratings

Is react-star-rating-controlled-component popular?

The npm package react-star-rating-controlled-component receives a total of 119 weekly downloads. As such, react-star-rating-controlled-component popularity was classified as not popular.

Is react-star-rating-controlled-component well maintained?

We found that react-star-rating-controlled-component demonstrated a not healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 16 Oct 2019
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc