Composant de notation riche en fonctionnalités pour React

Un composant de notation React léger, simple et personnalisable qui utilise des icônes SVG comme symboles de notation.

Caractéristiques:

• Possibilités infinies de personnalisation
• Formes de notation les plus courantes incluses
• Demi-remplissage intelligent sans configuration
• Style simple et mort par élément actif
• Construit dans un souci d’accessibilité
• Vraiment réactif et axé sur le mobile
• Contrôlable avec React Hook Form
• Structure DOM simple
• Prise en charge RTL sans configuration
• Fonctionne avec RSS

Comment l'utiliser:

1. Installez et importez le composant de notation.

# Yarn
$ yarn add @smastrom/react-rating

# NPM
$ npm i @smastrom/react-ratingimport { Rating } from '@smastrom/react-rating'
import '@smastrom/react-rating/style.css'

2. Créez le composant de notation dans votre application et initialisez l'état :

function App() {
  const [rating, setRating] = useState(0) // Initial value
  return <Rating style={{ maxWidth: 250 }} value={rating} onChange={setRating} />
}

3. Accessoires de composants disponibles.

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,

Aperçu:

Voir sur GitHub : https://github.com/SkyCaptainess/React-rating-components