{"repo":"smastrom/react-rating","free":true,"listed":false,"github":"https://github.com/smastrom/react-rating","clone":"git clone https://github.com/smastrom/react-rating.git","description":"Zero-dependency, highly customizable rating component for React","language":"TypeScript","stars":383,"topics":["rating","rating-stars","react","react-component","stars","react-rating","reviews","rating-star","star"],"license":"MIT","category":"ui-components","readme_excerpt":"React Rating Zero dependency, highly customizable rating component for React. Demo and Examples — NextJS Page Router — Vite Features - Use any SVG : No headaches, icon fonts or packages to install in order to use your favorite shapes. - Endless possibilities of customization - Most common rating shapes included - Zero-config smart half-fill - Dead simple per-active-item styling - Built with accessibility in mind - Truly responsive and mobile-first - Controllable with React Hook Form - Simple DOM structure - Zero-config RTL support - Works with SSR Installation Usage 1. Import CSS and Rating component Importing the CSS only once (most likely main.js or App.jsx ) is enough to use Rating in any other component of your App. Remix app/root.tsx in any page.tsx NextJS 13 - App Router Interactive rating app/layout.tsx components/Rating.tsx in any page/component: Non-interactive rating app/layout.tsx in any page/component: NextJS - Pages Router pages/\\ app.js in any page/component: Gatsby gatsby-browser.js - Create the file at the root of your project if it doesn't exist, and relaunch the dev server. in any page/component: Vite main.jsx in any component: 2. Give it a max-width and init the state Since Rating will span across the entire container, define a maximum width via inline styles or css class: CSS Class my-styles.css App.jsx API Legend Color Description ------------------- ------------------------------------------ :green circle: Has always effect :large blue circle: Has effect","default_branch":null,"files":null,"tree":[],"storefront":"/r/smastrom","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/smastrom/react-rating/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}