react-rating-svg v0.0.1
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 :focus
styles. 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
readOnly and disabled props~Add caption to render legend~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.