Skip to main content

Examples

Examples​

Default Props​


Show code

import * as React from 'react';
import StarPicker from 'react-star-picker';

export const LargePicker = () => {
  const [rating, setRating] = React.useState<number | null>(4);

  return (
    <StarPicker //
      value={rating}
      onChange={setRating}
      size={50}
    />
  );
};

export default LargePicker;

Custom Colors​


Show code

import * as React from 'react';
import StarPicker from 'react-star-picker';

const starRenderer = ({ index, selectedIndex }) => {
  const selected = index <= selectedIndex;

  if (selected) {
    return String.fromCharCode(10022);
  }
  return String.fromCharCode(10023);
};

const GreenPicker = () => {
  const [rating, setRating] = React.useState<number | null>(2);

  return (
    <StarPicker //
      className="greenStars"
      value={rating}
      onChange={setRating}
      starRenderer={starRenderer}
      starCount={3}
    />
  );
};

export default GreenPicker;

Rotation​


Show code

import * as React from 'react';
import StarPicker from 'react-star-picker';

export const RotatePicker = () => {
  const [rating, setRating] = React.useState<number | null>(4);

  return (
    <StarPicker //
      className="rotateStar"
      value={rating}
      onChange={setRating}
      size={45}
    />
  );
};

export default RotatePicker;

Shadow​


Show code

import * as React from 'react';
import StarPicker from 'react-star-picker';

export const EnlargePicker = () => {
  const [rating, setRating] = React.useState<number | null>(4);

  return (
    <StarPicker //
      className="enlargeStar"
      value={rating}
      onChange={setRating}
    />
  );
};

export default EnlargePicker;

Custom Renderer with Animation​


Show code

import * as React from 'react';
import StarPicker from 'react-star-picker';

const DollarSvg = ({ stroke, fill }: { stroke: string; fill: string }) => {
  return (
    <svg width="1em" height="1em" viewBox="-1 -1 16 24">
      <path
        d="M 5.7672275,0.10454656 5.7687798,1.8432524 C 3.1530349,2.1696584 0.85511786,3.5105694 0.63651923,5.9335327 0.51636012,10.566614 10.734409,11.654347 10.934687,15.030807 10.864893,17.460972 4.2894804,17.706665 3.2163668,14.995092 L 0.02261549,15.720285 C 0.77014071,18.029563 3.1584552,19.322457 5.7677453,19.684782 L 5.7687798,21.539435 8.6509212,21.539953 8.6504035,19.710663 C 11.644631,19.349577 14.241035,17.773814 14.225752,15.097063 14.229088,9.1564354 4.1341996,9.133676 3.9524306,6.0044467 3.9494677,3.7582878 10.035145,3.326126 10.629806,6.0577627 L 13.68535,5.4536939 C 13.196125,3.4596776 11.059157,2.2534069 8.6509212,1.8856981 L 8.6504035,0.10506428 Z"
        stroke={stroke}
        fill={fill}
        strokeWidth="0.9"
      />
    </svg>
  );
};

const dollarRenderer = ({ index, hoverIndex, selectedIndex }) => {
  const selected = index <= selectedIndex;
  const inHoverRange = hoverIndex != null && index <= hoverIndex;
  const hoverActive = hoverIndex != null;

  const colored = (selected && !hoverActive) || (inHoverRange && hoverActive);
  const color = colored ? '#1ca363' : 'grey';
  const colorOutline = colored ? 'green' : 'grey';
  return (
    <div className="dollarContainer">
      <DollarSvg //
        stroke={colorOutline}
        fill={selected ? color : 'none'}
      />
    </div>
  );
};

export const DollarPicker = () => {
  const [rating, setRating] = React.useState<number | null>(3);

  return (
    <StarPicker //
      value={rating}
      onChange={setRating}
      starRenderer={dollarRenderer}
      size={50}
      starCount={4}
    />
  );
};

export default DollarPicker;

Custom Renderer​


Show code

import * as React from 'react';
import StarPicker from 'react-star-picker';

const customCharacterRenderer = ({ index, selectedIndex }) => {
  const selected = index <= selectedIndex;

  return selected ? String.fromCharCode(10029) : String.fromCharCode(9733);
};

export const CustomPicker = () => {
  const [rating, setRating] = React.useState<number | null>(4);

  return (
    <StarPicker //
      className="customCharacter"
      value={rating}
      onChange={setRating}
      starRenderer={customCharacterRenderer}
      size={50}
    />
  );
};

export default CustomPicker;

Custom Renderer with Half-Star Precision​


Show code

import * as React from 'react';
import StarPicker from 'react-star-picker';

const simpleRenderer = ({ index, selectedIndex }) => {
  const selected = index <= selectedIndex;

  if (selected) {
    return String.fromCharCode(9733);
  }
  return String.fromCharCode(9734);
};

export const BluePicker = () => {
  const [rating, setRating] = React.useState<number | null>(3.5);

  return (
    <StarPicker //
      className="blueTheme"
      value={rating}
      onChange={setRating}
      starRenderer={simpleRenderer}
      size={60}
      halfStars
    />
  );
};

export default BluePicker;