Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-rating-star-with-type
Advanced tools
Readme
npm install react-rating-star-with-type --save
yarn add react-rating-star-with-type
Then in your project include the component:
import { useState } from "react";
import ReactStars from 'react-rating-star-with-type'
export default function app(){
const [star, setStar] = useState(5);
const onChange=(nextValue)=>{
setStar(nextValue)
}
return <ReactStars
onChange={onChange}
value={4.2}
isEdit={true}
activeColors={[ "red", "orange", "#FFCE00", "#9177FF","#8568FC",]}
/>
}
This a list of props that you can pass down to the component:
Property | Description | Default value | type |
---|---|---|---|
className | Name of wrapper class | "" | string |
count | How many total stars you want | 5 | number |
value | Set rating value | 0 | number |
emptyIcon | Which character you want to use as a star | (react-icons) | ReactNode |
halfIcon | Which character you want to use as a half star | (react-icons) | ReactNode |
filledIcon | Which character you want to use as a active star | (react-icons) | ReactNode |
inactiveColor | Color of inactive star | #808080 | string |
activeColors | Colors of active star (depend of value) | [] | String[] |
activeColor | Color of selected or active star | #FED900 | string |
size | Size of stars (if provide string you must mention unit , for example: "1rem" ) | 14 | number or String |
style | style object for component wrapper | {} | object |
isEdit | Should you be able to select rating or just see rating (for reusability) | false | boolean |
isHalf | isHalf true means you can select half star (make sure isEdit true if you set isHalf true) | false | boolean |
valueShow | Should component use valueShow, if need Rating show with stars | false | boolean |
onChange(new_rating) | Will be invoked any time the rating is changed | undefined | function |
Hit star on gitHub - https://github.com/ziaulhoque24/react-rating-star-with-type
You will need to have React in your project in order to use the component, I didn't bundle React in the build, because it seemed like a crazy idea.
It also works perfectly with next js in client components. with the server component, you may get an error!
FAQs
This simple react rating star component with typescript support made by Ziaul Hoque Founder of Revuers.com
The npm package react-rating-star-with-type receives a total of 358 weekly downloads. As such, react-rating-star-with-type popularity was classified as not popular.
We found that react-rating-star-with-type demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.