The goal of {fivestars} is to generate star ratings with HTML and CSS.
Install the development version from GitHub with:
install.packages("fivestars", repos = "https://tanho63.r-universe.dev")
# or use remotes/devtools
# install.packages("remotes")
remotes::install_github("tanho63/fivestars")
library(fivestars)
use_fivestars() adds the appropriate CSS and allows for some
configuration of defaults (star size, colour, and background).
use_fivestars(
star_size = "20px", # default is "larger"
star_color = "#fc0", # default
star_background = "#999" # default
)
<style>:root {
--star-size: 20px;
--star-background: #999;
--star-color: #fc0;
}
.fivestars {
--percent: calc(var(--rating)/5 * 100%);
/* display: inline-block; */
font-size: var(--star-size);
line-height: 1;
}
.fivestars::before {
content: '\2605\2605\2605\2605\2605';
background: linear-gradient(90deg, var(--star-color) var(--percent),
var(--star-background) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}</style>
Minimal usage of the fivestars function looks like this:
fivestars(rating = 3.5)
The output can be further customized with some arguments, e.g.
fivestars(rating = 1.2,
label = "Poor",
label_pos = "right",
aria_label = "This item is rated 'Poor'",
star_color = "#d13",
star_background = "#000")