Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Default rating

Basic Props for react-simple-star-rating is here

import React from 'react';
import { Rating } from 'react-simple-star-rating';

const DefaultRatings = () => {

  return (
    <>
        <Rating
            initialValue={2.5}
            fillColor="#298DFF"
            allowFraction
        />
        <Rating
            initialValue={2}
            allowFraction
        />
    </>
  );
};

export default DefaultRatings;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Progressives

Use fillColorArray={[]} prop for progressive range of colors in <Rating>.

Preview

Jsx

import React from 'react';
import { Rating } from 'react-simple-star-rating';

const ProgressiveRating = () => {

  return (
    <>
        <Rating
            initialValue={3}
            fillColorArray={[
                "#FF0000",
                "#E75410",
                "#FFC400",
                "#0FFF9F",
                "#00D67F"
            ]}
            transition
        />
    </>
  );
};

export default ProgressiveRating;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Read only

You can prevent the ratings from user intraction by enabling readonly.

Preview

Jsx

import React from 'react';
import { Rating } from 'react-simple-star-rating';

const ReadOnlyRatings = () => {

  return (
    <>
        <Rating
            initialValue={2.5}
            fillColor="#298DFF"
            readonly
        />
        <Rating
            initialValue={2}
            readonly
        />
    </>
  );
};

export default ReadOnlyRatings;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Tooltip

You can add your custom tooltip in <Rating> by using tooltipArray={[]} prop.

Preview

Jsx

import React from 'react';
import { Rating } from 'react-simple-star-rating';

const RatingWithTooltip = () => {

  return (
    <Rating
        initialValue={3}
        showTooltip
        tooltipArray={[
            'Poor',
            'Fair',
            'Good',
            'Excellent',
            'Wow'
        ]}
    />
  );
};

export default RatingWithTooltip;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Sizes

You can adjust your rating star sizes by adding sizeprop in px

Preview

Jsx

Props

import React from 'react';
import { Rating } from 'react-simple-star-rating';

const RatingWithTooltip = () => {

  return (
    <>
      <Rating initialValue={2} size="20" />
      <Rating initialValue={2} size="30" />
      <Rating initialValue={2} />
    </>
  );
};

export default RatingWithTooltip;

Prop	Type	Default	Description
size	number	40	SVG Icon width / height in px

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.