Skip to main content

Examples

Examples​

Emojis​


Show code

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

// Function to generate a random color in rgba format
function getRandomColor() {
  const r = Math.floor(Math.random() * 256); // Red (0-255)
  const g = Math.floor(Math.random() * 256); // Green (0-255)
  const b = Math.floor(Math.random() * 256); // Blue (0-255)
  const a = (Math.random() * 0.6 + 0.4).toFixed(2); // Opacity between 0.4 and 1

  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

// Function to generate a random rotation between -10deg and +10deg
function getRandomRotation() {
  const rotation = Math.floor(Math.random() * 21) - 10; // Random value between -10 and +10
  return `${rotation}deg`;
}

const faces = ['🤬', '😖', '😠', '🙄', '😐', '🤨', '😁', '🥳', '🤩', '🦄'];

const faceRenderer = ({ index, selectedIndex }) => {
  return (
    <span className={index === selectedIndex ? 'lastOfSelection' : ''}>
      {faces[index % faces.length]}
    </span>
  );
};

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

  // Recalculate the ripple color and button rotation whenever the rating changes
  const rippleColor = React.useMemo(() => {
    return getRandomColor();
  }, [rating]);
  const rotation = React.useMemo(() => {
    return getRandomRotation();
  }, [rating]);

  return (
    <div
      style={
        {
          '--ripple-color': rippleColor,
          '--rotation': rotation, // Pass the random rotation as a CSS variable
        } as React.CSSProperties
      }
    >
      <StarPicker //
        className="faceTheme"
        value={rating}
        onChange={setRating}
        starRenderer={faceRenderer}
        starCount={10}
      />
    </div>
  );
};

export default BluePicker;

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;