Description:
A lightweight, easy, customizable React rating component that uses SVG icons as rating symbols.
Features:
- Endless possibilities of customization
- Most common rating shapes included
- Zero-config smart half-fill
- Dead simple per-active-item styling
- Built with accessibility in mind
- Truly responsive and mobile-first
- Controllable with React Hook Form
- Simple DOM structure
- Zero-config RTL support
- Works with SSR
How to use it:
1. Install and import the rating component.
# Yarn $ yarn add @smastrom/react-rating # NPM $ npm i @smastrom/react-rating
import { Rating } from '@smastrom/react-rating'
import '@smastrom/react-rating/style.css'2. Create the rating component in your app and initialize the state:
function App() {
const [rating, setRating] = useState(0) // Initial value
return <Rating style={{ maxWidth: 250 }} value={rating} onChange={setRating} />
}3. Available component props.
value,
items = 5,
readOnly = false,
onChange = noop,
onHoverChange = noop,
onFocus = noop,
onBlur = noop,
isDisabled = false,
highlightOnlySelected = false,
orientation = OrientationProps.HORIZONTAL,
spaceBetween = Sizes.NONE,
spaceInside = Sizes.SMALL,
radius = Sizes.NONE,
transition = TransitionProps.COLORS,
itemStyles = defaultItemStyles,
isRequired = false,
halfFillMode = HFProps.SVG,
visibleLabelId,
visibleItemLabelIds,
invisibleItemLabels,
invisibleLabel = readOnly
? value > 0
? `Rated ${value} on ${items}`
: 'Not rated'
: 'Rating Selection',
resetLabel = 'Reset rating',
id,
className,
style,Preview:
