Rating

Props

Name	Type	Description
icon	L.IconTypes.Icons	In case you want any other icon
iconProps	IconProps	stroke, fill etc. See Icon
isDisabled	boolean	Don't click the rating
max	number	Max rating
onChange	(ev: ChangeEvent) => void	Change handler. The component will be in the read only state if onChange is omitted
onClick	React.MouseEventHandler<HTMLSpanElement>	Click handler, works for read only state
shouldRender	boolean	Pass `false` if you don't want the component to appear
theme	PartialGlobalDefaultTheme[ typeof COMPONENTS_NAMESPACES.calendar ]	...
value	number	Value
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.

Controlled
Uncontrolled


() => {
  const [rating, setRating] = React.useState()

  return (
    <L.Rating
      value={rating}
      onChange={({ component }) => {
        setRating(component.value)
        console.log(component.value)
      }}
    >
      Click me
    </L.Rating>
  )
}

Validation components' props

Name	Type	Description
form	string	Form name
invalidMessage	ReactNode	Text to show when the value does not match requirements
invalidMessageRender	RenderEvent => ReactNode	Invalid message customizator
isRequired	boolean	If you don't want the field to be empty
isValid	boolean	Controlled valid state
name	string	Component name
persistence	'sessionStorage' \| 'localStorage'	Persist the value in web storage
requiredMessage	ReactNode	Text to show when the field is not filled
shouldValidateUnmounted	boolean	The field can still affect form submission even if it is not rendered
validator	Validator \| PredefinedValidator \| RegExp \| ValidatorObject[]
	interface Validator { (value: any): boolean, }	A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. `(value) => value.length > 4`
	type PredefinedValidator = \| 'creditCardNumber' \| 'email' \| 'url'	See predefined validators
	interface ValidatorObject { validator: PredefinedValidator \| RegExp \| Validator, invalidMessage?: string, }	`ValidatorObject` is useful wnen you need to validate a value against several validators and show inividual messages for each. Just use an array of validator objects. E.g. [ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

Get component data


() => {

  return (
    <>
      <L.Rating
        form='rating-validation-form'
        name='rating'
        max={10}
        _mb-6
      >
        Click me
      </L.Rating>

      <L.Button
        form='rating-validation-form'
        onClick={({ form }) => {
          console.log(form['rating-validation-form']['rating'].value)
        }}
      >
        Click me
      </L.Button>
    </>
  )
}

Rating theme

Theme prop	CSS class name
disabled	chili-rating-disabled
invalid	chili-rating-invalid
item	chili-rating-item
itemFilled	chili-filled
itemWrapper	chili-rating-wrapper