React Rating SVG

React component to rating. You can define your own SVG symbol to display in renderer component.

Install

Run npm install react-rating-svg to get the component.

Make sure that you have installed react, react-dom and react-addons-shallow-compare to make it works.

Basic Usage

Like react form components it can be controlled or uncontrolled component setting the value prop. You can see more in official documentation.

Uncontrolled component

import { render } from 'react-dom';
import RatingSVG from 'react-rating-svg';

render(<RatingSVG name='my-rating' />, container)

Controlled component

import React from 'react';
import { render } from 'react-dom';
import RatingSVG from 'react-rating-svg';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 0 };
    }

    handleChange(value, name) {
        console.log(name, value);
        this.setState({value: value});
    }

    render() {
        const { value } = this.state;

        return (
            <RatingSVG
                name='my-controlled-rating'
                value={value}
                onChange={this.handleChange}
            />
        );
    }
}

render(<MyComponent />, container);

API

react-rating-svg props

| name | type | default | description | | -------------- | ----------------------- | :------------------------: | --------------- | | totalSymbols | number required | 5 | total rating svg symbols to render | | name | string required | | name for group form radios | | value | number | | value of component if is set the component it's controlled | | defaultValue | number | | initial value in uncontrolled component | | caption | string | | renders a legend with passed text in rating fieldset | | className | string | | custom css class to component | | onChange | Function(value, name) | | called when the radios value changed | | disabled | boolean | | disable the radio buttons preventing the change value | | readOnly | boolean | | same as disbled, but renders a hidden field with the passed initialValue or value | | svgSymbol | ReactComponentClass | SVGStar | Component class to render in label. See below how to customize svg symbols | | svgAttrs | object | { viewbox: '0 0 22 22' } | Renderer svg attributes |

SVG symbol customization

You can attach your own svg symbol to the component, todo you can create a React Component or stateless component function that returns the path or svg group to render inside label svg.

You can see an example in default svg symbol attached by component.

TODO: Add example to customize svg symbol.

Styling SCSS

Remember import scss to your css styles.

@import 'node_modules/react-rating-svg/lib/scss/react-rating-svg.scss';

You can import separately too:

@import 'node_modules/react-rating-svg/lib/scss/rating-svg.scss';
@import 'node_modules/react-rating-svg/lib/scss/rating-label.scss';

You can customize the colors and totalSymbols through scss variables:

$rating-svg-inactive-color: grey !default;
$rating-svg-active-colors: #006400 #9acd32 #ffd700 !default; // list of colors from higher to lower rating
$rating-svg-total-symbols: 5 !default;

And the library inlcudes a mixin ratingSVGSymbols to create your own :checked, :hover and :focusstyles. It creates default css rules to change the symbols colors

@import 'node_modules/react-rating-svg/lib/scss/utils.scss';

.r-rating-label{
    @include ratingSVGSymbols(
        $total-symbols, // default $rating-svg-total-symbols
        $active-colors, // default $rating-svg-active-colors
        $inactive-color, // default $rating-svg-inactive-color
        $hover-color-fn, // default lighten
        $hover-color-fn-amount // default 7%
    );

    // your own react-rating-labels styles
}

TODO

• [x] ~~readOnly and disabled props~~~
• [x] ~~Add caption to render legend~~~
• [x] ~~Add className prop to attach custom css class~~
• [ ] Fractional values in readOnly and disabled component or as initialValue / value. (Render svg gradient with fractional value linked to svgSymbol).
• [ ] Add steps
• [ ] Make examples suite and publish github page.
• [ ] Compile scss in css file to direct link in project.
• [ ] Add support with other css preprocessors.
• [ ] Enhance readme documentation.

License

ISC