stary v1.2.0

Commands

stary.show(config) - returns Html content for stars

stary.init() - enables rate change on clicking on a star

stary.getRate() - gets current rate as an integer number

Config options

Usage

import stary from 'stary';

const starsContainer = document.getElementById('stars');

// include stary in the DOM
starsContainer.innerHTML = stary.show({ number: 5, size: 20, color: '#ffc600' });

// add click events to your stars
stary.init();

// get current rate
let rate = stary.getRate();

Using custom icons

// The below will generate 5 emojis
stary.show({ number: 5, size: 20, icon: '💩' });

// The below will show the emojis in the array order 
stary.show({ number: 5, size: 20, icon: ['☹️', '🙁', '😐', '🙂', '😃'] });

Using callbacks and getting updated rate real time in React

It's possible to use a callback when calling the init function. It will be called everytime a star is clicked.

in the example below the callback is used to keep track of the current rating without having to call getRate multiple times.

import stary from 'stary';

function MyComponent() {
  // set the initial rate state with the useState hook
  const [rate, setRate] = useState(stary.getRate());

  // initialize the star ratings with setRate as the callback
  useEffect(() => {
    document.getElementById('stars').innerHTML = stary.show({ color: '#ffc600' });
    stary.init(setRate);
  }, []);

  return (
    <div>    
      <p>Current rating: {rate}</p>
      <div id="stars"></div>
      ...