svelt-rating-selector-display

This small, dependency-free Svelte component enables effortless user rating input and display. It offers seamless customization with Unicode characters to suit individual preferences. Moreover, it boasts full reactivity to ensure a smooth and dynamic user experience. Has user accesability, and keyboard input.

Features:

• Custom Theming
• Custom Icons Using Unicode Characters
• Get customer Ratings
• Present Ratings with Utmost Precision
• Set the Number Rating Icons
• All Props are Reactive
• Keyboard Shortcuts
• Built in User Accesability
• Handles Null values

How to istall

npm i svelt-rating-selector-display

How to use

How to get ratings

<script>
	import { RatingSelector } from 'svelte-rating-selector-display';
	let rating = Null; // This will be updated when a user selects a rating
</script>

<RatingSelector bind:rating enableSelection={true} />

How to display ratings

<script>
	import { RatingSelector } from 'svelte-rating-selector-display';
</script>

<RatingSelector rating={3.35} />

Props

| Prop | Type | Description | Default Value | | :---------------- | :---------------------------- | :------------------------------------------------------------------------------- | :------------ | | rating | number | null | Inital displayed rating, if null no rating is displayed | null | | enableSelection | boolean | null | If true the user can select a rating, if false a static rating will be displayed | false | | numberOfIcons | number | null | The number of icons to display for the rating | 5 | | style | [key: string]: string | null | A list of styles to be applied to the parent element of the selector | null |

If null is passed in for a prop, it will be set as the default value.

How to format

CSS variables

| Colors: | Default Value | Description | | :------------------------------ | :------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------ | | --icon-selected-color | #ffd700 | Color of rating icons when they are selected | | --icon-unselected-hover-color | #ccc | Color of rating icons when they are not selected | | --icon-selected-hover-color | #f9dd39 | Color of rating icons when they are selcted and hovered over | | --icon-unslected-color | #f9e053b1 | Color of rating icons when they are unslected and hovered over | | --focused-stroke-color | #ffffff | Color of stroke around rating icon when it is focused. This is for keyboard use, and user accessibility |

| Formating: | Default Value | Description | | :---------------------- | :------------ | :----------------------------------------------------------------------------------------------------- | | --icon-size | 3.5rem | Size of the rating icons | | --icon-spacing | 0rem | Space between rating icons | | --selector-icon | ★ | Icon to be desplayed | | --focused-stroke-size | 3px | Size of stroke around rating icon when it is focused. This is for keyboard use, and user accessibility |

example:

:root {
	--icon-selected-color: #211b27;
	--icon-unselected-hover-color: #948f97;
	--selector-icon: '☆';
}

Using style prop

<script>
	import { RatingSelector } from 'svelte-rating-selector-display';
	const style = {
		'--icon-selected-color': '#211B27',
		'--icon-unselected-color': '#948F97',
		'--selector-icon': JSON.stringify('☆'), // Note: --selection-icon must be stringified
	};
</script>

<RatingSelector rating={3.7} {style} />