/react-tiny-rate

⭐️ The smallest rating component for React , use character★ and ☆

Primary LanguageJavaScriptMIT LicenseMIT

React Tiny Rate

npm

The Smallest Rating Component for React

based one line rate component function

function rate(num){
  return "★★★★★☆☆☆☆☆".slice(5 - num, 10 - num);
}
rate(3)   // "★★★☆☆"

Features

  • based ☆ and ★
  • support float such as 3.5 4.7
  • theme
  • animate
  • size

Translation

Installation and usage

Once, install rate component for your project

npm install react-tiny-rate --save

Import react-tiny-rate into your app

import React from 'react';
import ReactDOM from 'react-dom';
import Rate from 'react-tiny-rate'

ReactDOM.render(<Rate />, document.getElementById('root'));

Use HTML template in JSX

<Rate />

Options from props

  • value {number|string} : Star value default:0
<Rate value="0.5"></Rate>
<Rate value="1"></Rate>
<Rate value="3.6"></Rate>

  • readonly {boolean} : Rate read-only. default:false
<Rate value="0.5"></Rate>
<Rate value="1"></Rate>
<Rate value="3.6" readonly="true"></Rate>

  • length {number|string} : Star size default:5
<Rate value="2" length="4"></Rate>
<Rate value="3.6" length="8"></Rate>
<Rate value="7.6" length="10"></Rate>

  • theme {color|enum('yellow','green','blue','red','purple','orange','black','wihte')}: Star color. default: yellow
<Rate value="4.5">Yellow</Rate>
<Rate value="4.5" theme="green">Green</Rate>
<Rate value="4.5" theme="blue">Blue</Rate>
<Rate value="4.5" theme="red">Red</Rate>
<Rate value="4.5" theme="purple">Purple</Rate>
<Rate value="4.5" theme="orange">Orange</Rate>
<Rate value="4.5" theme="black">Black</Rate>
<Rate value="4.5" theme="#91d5ff">#91d5ff</Rate>

  • size {number|string}: Rate size.
<Rate value="4.5" size='12px'>12px</Rate>
<Rate value="4.5" size='16px'>16px</Rate>
<Rate value="4.5" size='20px'>20px</Rate>
<Rate value="4.5" size='40px'>40px</Rate>

  • animate {number|string}: Rate animate duration. default:0
<Rate value="3.5" animate='1'>1s</Rate>
<Rate value="3.5" animate='2'>2s</Rate>
<Rate value="3.5" animate='3'>3s</Rate>

Events

  • onRate: Rate select callback.
import React from 'react';
import ReactDOM from 'react-dom';
import Rate from 'react-tiny-rate'

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {value:2.5}
    this.handleRate = this.handleRate.bind(this)
  }
  handleRate(value){
    console.log(value)
    this.setState({ value })
  }
  render(){
    return <Rate onRate={this.handleRate} value={this.state.value}>Rate </Rate>
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

Link

License

MIT.