v3 — Form Integration

import { StarRatingInput } from "star-rating-x";

<StarRatingInput
  label="Rate your experience"
  helperText="Your feedback helps us improve"
  required
  theme="gold"
/>

<StarRatingInput
  label="Product quality"
  required
  errorMessage="Please leave a rating."
  theme="fire"
/>

const r1 = useRatingField({ required: true });
const r2 = useRatingField({ required: true, minValue: 3 });

<form onSubmit={handleSubmit}>
  <StarRatingInput
    {...r1.field}
    label="Overall"
    required
    errorMessage={r1.errorMessage}
  />
  <StarRatingInput
    {...r2.field}
    label="Would recommend?"
    required
    helperText="Min 3 stars"
    errorMessage={r2.errorMessage}
  />
  <button type="submit">Submit</button>
</form>

import { useForm, Controller } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { StarRatingInput } from "star-rating-x";

const schema = z.object({
  rating: z.number().min(1,"Select at least 1 star"),
});

const { control } = useForm({
  resolver: zodResolver(schema),
  defaultValues: { rating: 0 },
});

<Controller
  name="rating"
  control={control}
  render={({ field, fieldState }) => (
    <StarRatingInput
      {...field}
      label="Product rating"
      required
      errorMessage={fieldState.error?.message}
    />
  )}
/>

import { StarRatingTooltip } from "star-rating-x";

const labels = ["Terrible 😡","Bad 😕","Okay 😐","Good 😊","Amazing! 🤩"];

<StarRatingTooltip
  tooltips={labels}
  tooltipRenderer={({ value, label }) => (
    <span><strong>{value}★</strong> — {label}</span>
  )}
  theme="gold"
  size={34}
/>

import { RatingDistribution } from "star-rating-x";

const data = { 5:312, 4:128, 3:45, 2:18, 1:9 };

<RatingDistribution
  data={data}
  theme="gold"
  showCount
  onFilter={(star) => setFilter(star)}
  activeFilter={filter}
/>