react-star-rating-controlled-component

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

1.0.1

latest

Version published: 3 years ago

Maintainers: 1

Yearly downloads: 10,939; increased by108.48%

Weekly downloads

Readme

Source

react-star-rating-controlled-component

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')
);

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