Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
react-flex-rating
Advanced tools
A (semi)full-featured React rating component.
className
propertyCheck out the demo here! https://23m6jr1v5y.codesandbox.io/
yarn add react-flex-rating
In your sass-enabled React app include this component's .scss:
@import "~react-flex-rating/lib/styles/index.scss";
(haven't figured out how to spit out compiled css using nwb-components yet)
Add the component into your app somewhere:
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import FontIcon from 'material-ui/FontIcon'
import Rating from 'react-flex-rating'
// Inside React component render():
<MuiThemeProvider>
<Rating
{...{
className: `custom-class`,
value: rating,
allowHalfs,
maxValue,
disabled,
iconCount: starCount,
activeIcon: (
<FontIcon className="material-icons font-size-2-5">
star
</FontIcon>
),
inactiveIcon: (
<FontIcon className="material-icons font-size-2-5">
star_border
</FontIcon>
),
onSelect: rating => this.setState({ rating })
}} />
</MuiThemeProvider>
(Note: currently only built and tested w/ material-ui 1.4.x FontIcon
. Not sure if it will work w/ other ReactElement
s.)
value
(Number): Current value of the component. Used to drive the rendering of "active" icons. This is passed into the firrst argument of the onSelect
callback method.allowHalfs
(Boolean): Allows for toggling between whole and half-icon selections.maxValue
(Number): Maximum value that full icon selection will indicate.disabled
(Boolean): Disables interaction w/ the component and sets appropriate classes for styling.iconCount
(Number): Number of icons to render.activeIcon
(ReactElement): Element to render in "active" state.inactiveIcon
(ReactElement): Element to render in "inactive" state.onSelect
(Function): Function that is called whenever a new rating value is selected.FAQs
react-flex-rating Flexable React Component for ratings
The npm package react-flex-rating receives a total of 0 weekly downloads. As such, react-flex-rating popularity was classified as not popular.
We found that react-flex-rating 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.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.