stars-rating-react-hooks - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

package.json

 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
@@ -37,3 +37,3 @@ "main": "dist/index.js",
   "name": "stars-rating-react-hooks",
-  "author": "harish.kulkarni",
+  "author": "07harish",
   "module": "dist/stars-rating-react-hooks.esm.js",
@@ -40,0 +40,0 @@ "size-limit": [

README.md

 # stars-rating-react-hooks ⭐️
 <img width="265" alt="stars-rating-react-hooks" src="https://user-images.githubusercontent.com/27046938/111029678-f390b180-8423-11eb-9497-e8ab2e797686.png">
 
-### Customizable react component for rating stars 
+### React Rating Stars - Customizable and headless hooks.
 
- - Define `config` object
- - import { StarsRating } from "stars-rating-react-hooks"
- - Start using `<StarsRating config={config} />`
-
 ***
@@ -44,6 +40,6 @@ [![NPM](https://img.shields.io/npm/v/stars-rating-react-hooks.svg)](https://www.npmjs.com/package/stars-rating-react-hooks)
 
-  
-  
+
+
     return  <StarsRating config={config} />
-  
+
 }
@@ -54,10 +50,64 @@
 ```
+## Usage (Customizable and Headless)
 
-More info on [prop getters](https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters)
 
-## Demo
-[Basic demo](https://codesandbox.io/s/stars-rating-react-hooks-c936v?file=/src/App.js) 
+```jsx
+import { useStars } from 'stars-rating-react-hooks'
 
+const config = {
+    number: 5,
+    value: 2,
+    renderFull: '★',
+    renderEmpty: '☆',
+  };
+
+const {
+    stars,
+    getStarProps,
+    getStarWrapperProps,
+    isSelecting,
+    selectingValue,
+    selectedValue,
+  } = useStars(config);
+
+        <span
+            {...getStarWrapperProps({
+              style: {
+                cursor: 'pointer',
+              },
+            })}
+          >
+               {stars?.map((star, i) => (
+                    <span
+                      key={i}
+                      {...getStarProps(i, {
+                        style: {
+                          fontSize: '40px',
+                        },
+                        onClick: (event , ratedValue ) => {
+                          alert(`You just rated ${ratedValue} Stars!!`);
+                        },
+                      })}
+                    >
+                      {star}
+                    </span>
+                  ))}
+       </span>
+```
+
+'getStarWrapperProps' and 'getStarProps' are prop getters, More info on [prop getters](https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters)
+
+## Demo:
+
+### Basic
+[Open Basic codesandbox](https://codesandbox.io/s/stars-rating-react-hooks-c936v?file=/src/App.js)
+
+### Customizable and Headless:
+
+[Open Customizable codesandbox](
+https://codesandbox.io/s/stars-rating-react-hooksadvanced-7xnuw?file=/src/App.js)
+
+
 ## License
 
 MIT © [07harish](https://github.com/07harish)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53338

increased by2.18%

Number of lines in readme file

112

increased by80.65%

No dependency changes