![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
react-ratings-declarative
Advanced tools
Readme
Customizable react star ratings. SVG stars that show aggregate star ratings to the hundreths decimal point.
npm install --save react-ratings-declarative
import WidgetRatings, { Widget } from './react-ratings-declarative';
class Foo extends Component {
changeRating( newRating ) {
this.setState({
rating: newRating
});
}
render() {
return (
<WidgetRatings
rating={this.state.rating}
widgetRatedColors="blue"
changeRating={this.changeRating}
>
<Widget />
<Widget />
<Widget
widgetDimension="60px"
svgIconViewBox="0 0 5 5"
svgIconPath="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
/>
<Widget widgetHoverColor="black" />
<Widget />
</WidgetRatings>
);
}
}
class Bar extends Component {
render() {
return (
<WidgetRatings
rating={3.403}
widgetDimensions="40px"
widgetSpacings="15px"
>
<Widget widgetRatedColor="green" />
<Widget widgetSpacing="30px" widgetDimension="15px" />
<Widget widgetRatedColor="black" />
<Widget widgetRatedColor="rebeccapurple" />
<Widget />
</WidgetRatings>
);
}
}
Prop | Type | Default | Description | Example |
---|---|---|---|---|
rating | number | 0 | The user's rating. Number of stars to highlight. | 3 |
typeOfWidget | string | 'Star' | The type of widget used as a rating meter | Point |
changeRating | function | ()=>{} | Callback that will be passed the new rating a user selects | const setNewRating = (rating) => this.props.dispatch( fooActions.setRating(rating) ) |
gradientPathName | string | '' | gradientPathname needed if app's path is not at the root | /app/ |
ignoreInlineStyles | boolean | false | ignore all the inline styles and write your own css using the provided classes | true |
svgIconPaths | string | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' | Set a path that describes the svg shape | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' |
svgIconViewBoxes | string | '0 0 51 48' | Set the view box for a custom svg path you might have | '0 0 51 48' |
svgs | node | none | Use a custom svg or react element | <svg><circle /></svg> |
widgetRatedColors | string | 'rgb(109, 122, 130)' | Color of stars that the user has rated | black |
widgetEmptyColors | string | 'rgb(203, 211, 227)' | Color of stars that the use hasn't rated | grey |
widgetHoverColors | string | 'rgb(230, 67, 47)' | Color of star when hovering over it in selection mode | yellow |
widgetDimensions | string | '50px' | The width and height of the star | 15px |
starSpacings | string | '7px' | The spacing between the stars | 0 |
Prop | Type | Default | Description | Example |
---|---|---|---|---|
svgIconPath | string | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' | Set a path that describes the svg shape | 'm25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z' |
svgIconViewBox | string | '0 0 51 48' | Set the view box for a custom svg path you might have | '0 0 51 48' |
svg | node | none | Use a custom svg or react element | <svg><circle /></svg> |
widgetRatedColor | string | 'rgb(109, 122, 130)' | Color of stars that the user has rated | black |
widgetEmptyColor | string | 'rgb(203, 211, 227)' | Color of stars that the use hasn't rated | grey |
widgetHoverColor | string | 'rgb(230, 67, 47)' | Color of star when hovering over it in selection mode | yellow |
widgetDimension | string | '50px' | The width and height of the star | 15px |
starSpacing | string | '7px' | The spacing between the stars | 0 |
Supports Chrome, safari, firefox, edge, and ie 9+. The star is SVG, so this library fails for any browser that doesn't support svg.
I use the css property fill: 'url(#starGrad<randomNum>)';
to fill in just a percentage of a star. It has some weird bugs depending on the pathname of the app. Normally SPA's have window.location.pathname === '/'
, but if you append window.location.origin
with the pathname of say app
, so that window.location.pathname === '/app/'
, then you need a gradientPathName of '/app/'
.
Here is a stackoverflow post that I found that was related to this issue: http://stackoverflow.com/questions/36774188/svg-internal-url-links-and-iframes-on-wirecloud
If you want to contribute: Make changes in the src folder. And then run make build
.
The make build
command compiles react and es6 stuff using babel from src/
into build/
.
FAQs
A customizable rating component for selecting x widgets or visualizing x widgets
The npm package react-ratings-declarative receives a total of 4,568 weekly downloads. As such, react-ratings-declarative popularity was classified as popular.
We found that react-ratings-declarative demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.