Solid-rating NPM

🌟 solid-rating 🌟

Highly customizable, easy to use, declarative and zero dependency stars rating component for Solid.

Installation

pnpm add solid-rating

yarn add solid-rating

npm i solid-rating

Usage

Import CSS and Rating component

// Actual Rating component
import Rating from "solid-rating";
// Import global CSS from node_modules folder
import "./node_modules/solid-rating/dist/style.css";

Importing the CSS only once in the top-level file (most likely main.js or App.jsx) is enough to use Rating component throughout your App.

Use with default value

import { createEffect, createSignal } from "solid-js";
import "./node_modules/solid-rating/dist/style.css"; // Replace with your actual node_modules folder path
import Rating from "solid-rating";

function App() {
  return (
    <div>
      <div
        style={{
          display: "flex",
          "align-items": "center",
          "justify-content": "center",
        }}
      >
        <Rating
          maxRating={5}
          initialRating={3}
          size={100}
          color="#e4e5e9"
          activeColor="#Afc107"
          isDisabled
          onChange={setValue}
          onClick={setClickValue}
        />
      </div>
    </div>
  );
}

export default App;

API

🌀 Core

Prop	Description	Type	Default	Required
`maxRating`	Maximum number of rating items to display.	number	5	❌
`initialRating`	Initial value for rating items	number	0	❌
`size`	Size of rating item	number	24	❌
`color`	Color of rating item	string	#e4e5e9	❌
`activeColor`	Color of rating item when they active	string	#ffc107	❌
`halfFillMode`	Allow user to point half value	boolean	false	❌
`isRequired`	Whether users should be able to set rating to 0 or not.	boolean	false	❌
`isDisabled`	Whether to disable the radio group or not.	boolean	false	❌
`readOnly`	Whether to render an accessible image element or not.	boolean	false	❌
`onChange`	Setter signal or custom function to update the rating.	RatingChange	() => {}	Only if readOnly is false
`onClick`	Setter signal or custom function to get the current clicked star index.	RatingClick	() => {}	Only if readOnly is false