Rating

Overview of the Phoenix and LiveView Rating Component

The Mishka Chelekom rating component is a Phoenix LiveView component that allows developers to create dynamic and customizable rating systems, ideal for user reviews and feedback. It offers flexibility in layout, allowing for easy adjustment of star count, size, color, and gap between stars, ensuring a clean and professional look. The Mishka rating component visually represents ratings by changing the background color of the star icons, effectively showing the selected rating value.

This Phoenix LiveView component also supports interactive and non-interactive modes, making it perfect for both static displays and allowing users to submit ratings. With hover effects for previewing ratings and its responsive design, this rating component enhances user interaction and overall experience.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.

Interactive prop

The true and false values for the interactive prop determine whether the rating component behaves interactively. When set to true, users can hover over the stars to preview their rating, and stars before the hovered one will change color as well. When set to false, the component remains static. By default, this prop is set to false.

When a star is clicked, an event called rating that sends the values of "action" => "select" and "number" => number of selected to the server.

The validation of the data that the user must send is the responsibility of the developer. This part should be handled in the backend. For more information on security aspects, please visit the security section .

<.rating interactive />

Count prop

The count prop in the Phoenix rating component defines the number of stars to be displayed, with a default value of integer 5. This prop allows developers to specify how many rating units are shown, making it adaptable for different use cases, such as 5-star or 10-star rating systems. By adjusting the count, you can easily match the rating scale to your application's specific needs, whether it's for product reviews, feedback systems, or other rating interfaces. This prop provides flexibility in tailoring the user experience and visual design of the rating component.

<.rating count={6} />
<.rating count={8} />

Select prop

The select prop in the rating component determines how many stars are selected, visually indicating the current rating by changing the background color of the stars. With a default value of 0, no stars are selected initially, but as this prop is set to a higher value, the corresponding number of stars will display as selected. This is useful for both displaying static ratings and allowing users to select their desired rating in interactive modes. The select prop provides a clear visual representation of the rating or feedback score.

<.rating />
<.rating select={3} />
<.rating select={5} />

Color prop

The rating component allows you to customize the appearance of the rating stars using the color prop. This prop supports various color themes such as primary, secondary, success, and more, letting you match the rating component with the design of your application. The default color is warning, providing a yellow/gold star style typical for ratings.

<.rating color="white" />
<.rating color="primary" />
<.rating color="secondary" />
<.rating color="success" />
<.rating color="warning" />
<.rating color="danger" />
<.rating color="info" />
<.rating color="misc" />
<.rating color="dawn" />
<.rating color="light" />
<.rating color="dark" />

Gap prop

The gap prop in the rating component allows you to control the spacing between the rating stars. You can choose from predefined options like extra_small, small, medium, large, and extra_large. By default, the gap is set to small, but this can be customized to adjust the spacing based on your design needs.

<.rating gap="extra_small" />
<.rating gap="small" />
<.rating gap="medium" />
<.rating gap="large" />
<.rating gap="extra_large" />

Size prop

The size prop in the rating component allows for customization of the visual scale of the stars in the rating system. With options ranging from extra_small to quadruple_large, developers can easily adjust the size to fit different design needs. Whether it's a compact display with extra_small or a more prominent visual using quadruple_large, the size prop ensures that the rating component can adapt to various UI layouts.

<.rating size="extra_small" />
<.rating size="small" />
<.rating size="medium" />
<.rating size="large" />
<.rating size="extra_large" />
<.rating size="double_large" />
<.rating size="triple_large" />
<.rating size="quadruple_large" />

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction. Default is nil.
class	string	No	Custom CSS class for additional styling. Default is nil.
gap	string	No	Custom gap style. Default is small.
size	string	No	Determines the overall size of the elements, including padding and font size. Default is small.
color	string	No	Determines the color theme. Default is warning.
count	integer	No	Number of stars to display. Default is 5.
select	integer	No	Initial selected rating value. Default is 0.
params	map	No	A map of additional parameters used for element configuration.
on_action	JS	No	Custom JS module for the on_action action.
interactive	boolean	No	If true, stars are wrapped in a button for selecting a rating. Default is false.

Name	Type	Options	Recommended?
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large	Yes
`--only`	string	rating	Yes
`--module`	string	Something	NO

Mishka