Socket
Socket
Sign inDemoInstall

react-star-picker

Package Overview
Dependencies
9
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.0 to 4.0.0

5

lib/esm/index.d.ts

@@ -22,5 +22,2 @@ import * as React from 'react';

className?: string;
/** number of stars in the input [DEPRECATED: use the new `starCount` prop instead]
* @deprecated */
numberStars?: number;
/** number of stars in the input */

@@ -32,3 +29,3 @@ starCount?: number;

declare const StarPicker: ({ value, onChange, name, className, numberStars, starCount, size, disabled, halfStars, resettable, starRenderer, }: StarPickerProps) => React.JSX.Element;
declare const StarPicker: ({ value, onChange, name, className, starCount, size, disabled, halfStars, resettable, starRenderer, }: StarPickerProps) => React.JSX.Element;

@@ -35,0 +32,0 @@ declare const defaultStarRenderer: () => React.ReactNode;

2

lib/esm/index.js

@@ -6,3 +6,3 @@ "use client";import*as e from"react";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var r,n={exports:{}};

http://jedwatson.github.io/classnames
*/r=n,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];r&&(e=a(e,n(r)))}return e}function n(r){if("string"==typeof r||"number"==typeof r)return r;if("object"!=typeof r)return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var n="";for(var s in r)e.call(r,s)&&r[s]&&(n=a(n,s));return n}function a(e,t){return t?e?e+" "+t:e+t:e}r.exports?(t.default=t,r.exports=t):window.classNames=t}();var a=t(n.exports);const s=()=>e.createElement("div",{className:"DefaultStarComponent"},String.fromCharCode(9733)),o=({halfStars:t,starRenderer:r,index:n,selectedIndex:s,hoverIndex:o})=>e.createElement("div",{className:a("StarPickerButtonContent",{halfStars:t})},r({index:n,selectedIndex:s,hoverIndex:o})),l=({index:t,selectedIndex:r,hoverIndex:n,onClick:s,onHoverChange:l,starRenderer:d,halfStars:i,disabled:c})=>{const u=t<=r,f=null!=n,p=f&&t<=n;return e.createElement("button",{"aria-label":`button ${t+1}`,className:a("StarPickerButton",{disabled:c,halfStars:i,selected:u,addSelection:f&&!u&&p,removeSelection:f&&u&&!p,isHovered:n===t}),type:"button",onClick:()=>{s(t)},onMouseEnter:()=>{c||l(t)},onMouseLeave:()=>{c||l(null)},disabled:c},e.createElement(o,{halfStars:i,starRenderer:d,index:t,selectedIndex:r,hoverIndex:n}))},d=({value:t,onChange:r,name:n,className:o,numberStars:d,starCount:i,size:c=34,disabled:u=!1,halfStars:f=!1,resettable:p=!1,starRenderer:v=s})=>{const[S,m]=e.useState(null),x=e.useRef(null);e.useEffect((()=>{x.current&&x.current.style.setProperty("--star-size",`${String(c)}px`)}),[c]);const h=e=>{r&&r(((e,t,r,n)=>{const a=((e,t)=>t?(e+1)/2:e+1)(e,r);return n&&a===t?null:a})(e,t,f,p),n)},y=e=>{m(e)},b=i??d??5,g=((e,t)=>e?t?2*e-1:e-1:-1)(t,f),C=f?2*b:b;return e.createElement("div",{className:a("StarPicker",o),ref:x},[...Array(C).keys()].map((t=>e.createElement(l,{key:`star-${t}`,index:t,selectedIndex:g,hoverIndex:S,onClick:h,onHoverChange:y,starRenderer:v,halfStars:f,disabled:u,size:c}))))};export{d as StarPicker,d as default,s as defaultStarRenderer};
*/r=n,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var r=arguments[t];r&&(e=a(e,n(r)))}return e}function n(r){if("string"==typeof r||"number"==typeof r)return r;if("object"!=typeof r)return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var n="";for(var o in r)e.call(r,o)&&r[o]&&(n=a(n,o));return n}function a(e,t){return t?e?e+" "+t:e+t:e}r.exports?(t.default=t,r.exports=t):window.classNames=t}();var a=t(n.exports);const o=()=>e.createElement("div",{className:"DefaultStarComponent"},String.fromCharCode(9733)),l=({halfStars:t,starRenderer:r,index:n,selectedIndex:o,hoverIndex:l})=>e.createElement("div",{className:a("StarPickerButtonContent",{halfStars:t})},r({index:n,selectedIndex:o,hoverIndex:l})),s=({index:t,selectedIndex:r,hoverIndex:n,onClick:o,onHoverChange:s,starRenderer:d,halfStars:i,disabled:c})=>{const u=t<=r,f=null!=n,v=f&&t<=n;return e.createElement("button",{"aria-label":`button ${t+1}`,className:a("StarPickerButton",{disabled:c,halfStars:i,selected:u,addSelection:f&&!u&&v,removeSelection:f&&u&&!v,isHovered:n===t}),type:"button",onClick:()=>{o(t)},onMouseEnter:()=>{c||s(t)},onMouseLeave:()=>{c||s(null)},disabled:c},e.createElement(l,{halfStars:i,starRenderer:d,index:t,selectedIndex:r,hoverIndex:n}))},d=({value:t,onChange:r,name:n,className:l,starCount:d,size:i=34,disabled:c=!1,halfStars:u=!1,resettable:f=!1,starRenderer:v=o})=>{const[p,x]=e.useState(null),S=e=>{r&&r(((e,t,r,n)=>{const a=((e,t)=>t?(e+1)/2:e+1)(e,r);return n&&a===t?null:a})(e,t,u,f),n)},m=e=>{x(e)},h=d??5,y=((e,t)=>e?t?2*e-1:e-1:-1)(t,u),b=u?2*h:h;return e.createElement("div",{className:a("StarPicker",l),style:{fontSize:`${i}px`}},[...Array(b).keys()].map((t=>e.createElement(s,{key:`star-${t}`,index:t,selectedIndex:y,hoverIndex:p,onClick:S,onHoverChange:m,starRenderer:v,halfStars:u,disabled:c,size:i}))))};export{d as StarPicker,d as default,o as defaultStarRenderer};
//# sourceMappingURL=index.js.map
{
"name": "react-star-picker",
"version": "3.0.0",
"version": "4.0.0",
"description": "A star-rating component made with React",

@@ -18,15 +18,3 @@ "type": "module",

"scripts": {
"prebuild-webpack": "rm -rf dist/*",
"build-js": "webpack --config config/webpack-lib-config.js",
"build-types": "tsc --emitDeclarationOnly",
"build-webpack": "npm run build-js && npm run build-types",
"prepare": "npm run build",
"start:dev": "node config/webpack-dev-server.js",
"build-pages": "rm -rf dist-examples/* && webpack --config config/webpack-prod-config.js",
"start:prod": "npm run build-pages && serve dist-examples",
"start:prod-nb": "serve dist-examples",
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build",
"predeploy": "rm -rf styleguidistHtml/* && npm run styleguide:build",
"deploy": "gh-pages -d styleguidistHtml",
"lint": "eslint .",

@@ -67,7 +55,4 @@ "build": "rm -rf lib/* && rollup --config"

"@types/react-dom": "^16.9.16",
"acorn": "^6.4.2",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.5",
"babel-plugin-styled-components": "^1.13.3",
"css-loader": "^3.6.0",
"eslint": "^6.8.0",

@@ -81,15 +66,5 @@ "eslint-config-airbnb": "^18.2.1",

"eslint-plugin-react-hooks": "^1.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.3.0",
"gh-pages": "^2.2.0",
"html-webpack-plugin": "^5.5.0",
"path": "^0.12.7",
"polished": "^3.7.2",
"prettier-eslint": "^9.0.2",
"react": "^16.14.0",
"react-docgen-typescript": "^1.22.0",
"react-dom": "^16.14.0",
"react-hot-loader": "^4.13.0",
"react-styleguidist": "^11.2.0",
"react-switch-input": "git+https://github.com/mmkari/react-switch-input.git",
"rollup": "^4.9.6",

@@ -102,15 +77,3 @@ "rollup-plugin-css-only": "^4.5.2",

"rollup-plugin-terser": "^7.0.2",
"serve": "^11.3.2",
"source-map-loader": "^0.2.4",
"style-loader": "^1.3.0",
"styled-components": "^4.4.1",
"terser-webpack-plugin": "^5.3.10",
"ts-loader": "^7.0.5",
"typescript": "^5.0.4",
"uglify-js": "^3.17.4",
"webpack": "^5.84.1",
"webpack-cli": "^5.1.1",
"webpack-command": "^0.5.1",
"webpack-dev-server": "^3.11.3",
"webpack-merge": "^4.2.2"
"typescript": "^5.0.4"
},

@@ -122,4 +85,4 @@ "peerDependencies": {

"dependencies": {
"classnames": "^2.3.2"
"classnames": "^2.5.1"
}
}

@@ -14,11 +14,13 @@ <h1 align="center">react-star-picker</h1>

- [supports half-star precision](https://mmkari.github.io/react-star-picker/#/Props/halfStars)
- [responsive hover highlighting](https://mmkari.github.io/react-star-picker/#/Props/starRenderer)
- [custom number of stars](https://mmkari.github.io/react-star-picker/#/Props/numberStars)
- [value clearing option](https://mmkari.github.io/react-star-picker/#/Props/doubleTapResets)
- [input disabling](https://mmkari.github.io/react-star-picker/#/Props/disabled)
- supports half-star precision
- responsive hover highlighting
- custom number of stars
- value clearing option
- input disabling
[Read more in the docs.](https://mmkari.github.io/react-star-picker/)
### Support for custom star-renderer
Even more customizability is provided by the ability to use your own star-renderer. [See example in styleguide.](https://mmkari.github.io/react-star-picker/#/Examples/Custom%20Renderer)
Even more customizability is provided by the ability to use your own star-renderer. [Read more here.](https://mmkari.github.io/react-star-picker/docs/tutorial/props#starrenderer)

@@ -60,11 +62,11 @@ # Documentation

## Styleguide
## Links to Docs
[Props](https://mmkari.github.io/react-star-picker/#/Props)
[Props](https://mmkari.github.io/react-star-picker/docs/tutorial/props)
[Configuration](https://mmkari.github.io/react-star-picker/#/Documentation/Configuration)
[Configuration](https://mmkari.github.io/react-star-picker/docs/tutorial/customization)
[Styles](https://mmkari.github.io/react-star-picker/#/Documentation/Styles)
[Styles](https://mmkari.github.io/react-star-picker/docs/tutorial/styling)
[Examples](https://mmkari.github.io/react-star-picker/#/Examples)
[Examples](https://mmkari.github.io/react-star-picker/docs/examples)

@@ -71,0 +73,0 @@ ## Component APIs

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc