A small and simple component to create icons from a rating

Last update: Nov 13, 2021

Pretty rating React

A small and simple library that transform you rating in icons for you web

Pretty rating React

Status

Version Build Status Coverage Status dependencies Status devDependencies Status peerDependencies Status

Getting started

To install as npm dependency

npm i pretty-rating-react

API Documentation

PrettyRating

This is the wrapper component that creates the pretty format of our rating.

Name Type Required Default value Values Allowed Description
value number true - Positive integers or floats Rating that we will transform to icons.
icons object false complete and empty with faStar and half with faStarHalfAlt Each keys allow string or FontAwesome´s icon Object with 3 states: complete when the rating number is integer, half when it is floating and empty to fill if it is missing for the total.
max number false 5 Positive integers Number of icons to create.
colors array false ["#000", "#000", "#000"] Hexadecimal - RGB - HSLA - Color Names Colors with which icons are rendered.

The max prop determines the number of icons to render, it's related to value. So, if themax is 5, the rating must be from 0 to 5. The indexes of array of colors prop represent the color to icons to render. colors[0] is for thecomplete icons, colors[1] is for the half icons and colors[2] is for the empty icons.

How to use it

The following snippet will show you how to use the library: (Example with icons of FontAwesome)

Using function components (without Typescript):

import React from 'react';
import PrettyRating from "pretty-rating-react";
import {
  faHeart,
  faStar,
  faHeartBroken,
  faStarHalfAlt,
} from "@fortawesome/free-solid-svg-icons";
import {
  faHeart as farHeart,
  faStar as farStar,
} from "@fortawesome/free-regular-svg-icons";

const icons = {
  star: {
    complete: faStar,
    half: faStarHalfAlt,
    empty: farStar,
  },
  heart: {
    complete: faHeart,
    half: faHeartBroken,
    empty: farHeart,
  },
};

const colors = {
 star: ['#d9ad26', '#d9ad26', '#434b4d'],
 heart: ['#9b111e', '#a83f39'],
};

const Main = () => (
 <div>
  <div>
   <h1>Assesment</h1>
   <PrettyRating value={5} icons={icons.star} colors={colors.star} />
  </div>

  <div>
   <h1>Assesment</h1>
   <PrettyRating value={3.5} icons={icons.star} colors={colors.star} />
  </div>

  <div>
   <h1>6.5/10 life points</h1>
   <PrettyRating value={6.5} icons={icons.heart} colors={colors.heart} max={10} />
  </div>

  <div>
   <h1>Full life points</h1>
   <PrettyRating value={10} icons={icons.heart} colors={colors.heart} max={10} />
  </div>
 </div>
);

Using function components (with Typescript):

import React from 'react';
import PrettyRating, { IconsInterface } from "pretty-rating-react";
import {
  faHeart,
  faHeartBroken,
  faStar,
  faStarHalfAlt,
} from "@fortawesome/free-solid-svg-icons";
import {
  faHeart as farHeart,
  faStar as farStar,
} from "@fortawesome/free-regular-svg-icons";

interface CustomIconsInterface {
  star: IconsInterface;
  heart: IconsInterface;
}

const icons: CustomIconsInterface = {
  star: {
    complete: faStar,
    half: faStarHalfAlt,
    empty: farStar,
  },
  heart: {
    complete: faHeart,
    half: faHeartBroken,
    empty: farHeart,
  },
};

const colors = {
 star: ['#d9ad26', '#d9ad26', '#434b4d'],
 heart: ['#9b111e', '#a83f39'],
};

const Main = () => (
 <div>
  <div>
   <h1>Assesment</h1>
   <PrettyRating value={5} icons={icons.star} colors={colors.star} />
  </div>

  <div>
   <h1>Assesment</h1>
   <PrettyRating value={3.5} icons={icons.star} colors={colors.star} />
  </div>

  <div>
   <h1>6.5/10 life points</h1>
   <PrettyRating value={6.5} icons={icons.heart} colors={colors.heart} max={10} />
  </div>

  <div>
   <h1>Full life points</h1>
   <PrettyRating value={10} icons={icons.heart} colors={colors.heart} max={10} />
  </div>
 </div>
);

License

MIT (c) - Eduardo Álvarez

GitHub

https://github.com/Proskynete/pretty-rating-react
You might also like...

A simple star rating component for your React projects

A simple star rating component for your React projects

react-stars ⭐ A simple star rating component for your React projects (now with half stars and custom characters) Get started quickly Install react-sta

Apr 16, 2022

A Google Playstore like star rating chart as a React component.

A Google Playstore like star rating chart as a React component.

react-star-rating-chart A React component that is inspired by the Google Play Store start rating chart. under construction This component is not maint

Oct 8, 2021

A basic movie rating application which created with using Redux Toolkit, Axios for API calls, React Router DOM for Routing and Node-SASS for my SCSS compile to CSS..

A basic movie rating application which created with using Redux Toolkit, Axios for API calls, React Router DOM for Routing and Node-SASS for my SCSS compile to CSS..

May 5, 2022

The star rating

The star rating

React Awesome Stars Rating · React Awesome Stars Rating is a simple star component with easy integration for your React applications. Table of Content

Feb 5, 2022

WebApp to check friend's codechef rating & other details easily.

Codechef Cards A WebApp to check friend's codechef rating and other details. Just add username and track your friends progress!! Press delete to remov

May 1, 2022

A tiny library to support Huawei AppGallery in-app rating/commenting for React-Native

A tiny library to support Huawei AppGallery in-app rating/commenting for React-Native

react-native-appgallery A tiny library to support Huawei AppGallery in-app rating/commenting for React-Native With this library you can open the nativ

Apr 28, 2022

Github-repository-metrics - A simple and small react component can check your repository stars and change theme on light/dark

Github-repository-metrics - A simple and small react component can check your repository stars and change theme on light/dark

Repository metrics for react This beauty and easy (4KB) react component can help

Apr 20, 2022

Simple task list using NodeJS, Typescript, React, Redux, Chakra UI and React Icons

Simple task list using NodeJS, Typescript, React, Redux, Chakra UI and React Icons

Simple task list using NodeJS, Typescript, React, Redux, Chakra UI and React Icons

Apr 23, 2022

📦 This package provides the Simple Icons packaged as a set of React components.

react-simple-icons This package provides a React component for simple-icons. Installation Install the package in your project directory with: // with

May 2, 2022

A simple to-do list application developed with React, Chakra UI, React icons

A simple to-do list application developed with React, Chakra UI, React icons

React todo list Um aplicativo de lista de tarefas simples desenvolvido com React, Chakra UI, React icons Live Demo on Vercel 🚀 Getting Started Clone

May 2, 2022

A small and simple example app with navigation, data persistence, listview and animation!

A small and simple example app with navigation, data persistence, listview and animation!

react-native-quick-sample A small and simple example app with navigation, data persistence, listview and animation! Install and run on android npm ins

Mar 12, 2022

57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.

57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.

React-CRUD-Icons · React-CRUD-Icons is a set of SVG icons for CRUD (Create, Read, Update, Delete) apps, implemented as a React component with light &

Apr 10, 2022

Build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface

Build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface

Today we're going to build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface - specifically, we are building the

May 13, 2022

🌈 React component for Iconly icons

🌈 React Iconly Icons React component for Iconly icons react-iconly is a collection of simply beautiful open source icons for React.js. Each icon is d

May 10, 2022

React Native component for Feather icons

React Native component for Feather icons

React Native Feather Icons What is react-native-feather? react-native-feather is a collection of simply beautiful open source icons for React Native.

Dec 26, 2021

This is Clone of Gmail web Application built in React, redux(state management), firebase(auth and realtime db), material-UI (for only icons and buttons)

This is Clone of Gmail web Application built in React, redux(state management), firebase(auth and realtime db), material-UI (for only icons and buttons)

Intro This is a Clone of Gmail web Application built in React, redux(state management), firebase(auth and realtime db), material-UI (only icons and bu

Apr 3, 2022

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

May 14, 2022

Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.

Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface.

react-avatar-editor Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface. Insta

May 15, 2022

A small package that exposes a performant stopwatch UI component and hook.

@glamboyosa/react-stopwatch A small package that exposes a performant stopwatch UI component and hook. demo.mov Install npm install --save @glamboyosa

Nov 27, 2021
Comments
  • 1. Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-29 12:51
A simple react component for adding a star rating to your project.
A simple react component for adding a star rating to your project.

A simple react component for adding a star rating to your project.

May 14, 2022
A simple star rating component for your React projects
A simple star rating component for your React projects

react-stars ⭐ A simple star rating component for your React projects (now with half stars and custom characters) Get started quickly Install react-sta

Apr 16, 2022
The star rating
The star rating

React Awesome Stars Rating · React Awesome Stars Rating is a simple star component with easy integration for your React applications. Table of Content

Feb 5, 2022
Star-wars-api - SWAPI project using React and TypeScript
Star-wars-api - SWAPI project using React and TypeScript

Small project using React and TypeScript to start the app use NPM start

Feb 1, 2022
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Feb 24, 2022
A small and simple component to create icons from a rating
A small and simple component to create icons from a rating

A small and simple library that transform you rating in icons for you web

Nov 13, 2021
A small and simple component to create icons from a rating
A small and simple component to create icons from a rating

Pretty rating React A small and simple library that transform you rating in icons for you web Status Getting started To install as npm dependency npm

Nov 13, 2021
React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

Apr 1, 2022
[Looking for Maintainers (email me)]: A simple star rating component built with React.
[Looking for Maintainers (email me)]: A simple star rating component built with React.

react-star-rating A simple star rating component built with React. Install $ npm install react-star-rating --save Include the css: <link rel="styleshe

Jan 17, 2022
A simple react component for adding a star rating to your project.
A simple react component for adding a star rating to your project.

A simple react component for adding a star rating to your project.

May 14, 2022