{"_id":"@dakshkhetan/react-rating-tooltip","_rev":"3-f15b5c03e50b10556b0ae0dd7b9fc7db","name":"@dakshkhetan/react-rating-tooltip","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@dakshkhetan/react-rating-tooltip","version":"1.0.0","description":"React Star Rating/Review Component with tooltip support","main":"./lib/Rating.js","license":"MIT","homepage":"https://github.com/dakshkhetan/react-rating-tooltip","repository":{"type":"git","url":"git+https://github.com/dakshkhetan/react-rating-tooltip.git"},"bugs":{"url":"https://github.com/dakshkhetan/react-rating-tooltip"},"keywords":["react","ratings","rating","star ratings","star-ratings","react-reviews","react-ratings","react-rating","react ratings","react rating"],"scripts":{"build":"webpack"},"peerDependencies":{"prop-types":"^15.6.0","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-core":"^6.21.0","babel-loader":"^7.1.4","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","css-loader":"^1.0.0","file-loader":"^1.1.11","path":"^0.12.7","prop-types":"^15.6.0","react":"^16.8.0","react-dom":"^16.8.0","style-loader":"^0.22.1","url-loader":"^1.0.1","webpack":"^4.5.0","webpack-cli":"^4.7.0"},"gitHead":"15b3c9572fa67264d2b673e899fabd7df415f26b","_id":"@dakshkhetan/react-rating-tooltip@1.0.0","_nodeVersion":"14.15.3","_npmVersion":"6.14.9","dist":{"integrity":"sha512-J6Jl2jZCrhmwec4F/f27gl5meY7XodKsOkVLxP+nHcweFw0/M96c9/BpUVYMDGW9w9kb1oY9rKA25qWwHCBYZQ==","shasum":"9cc898b92d162cace73640c65055fd6eb06337f2","tarball":"https://registry.npmjs.org/@dakshkhetan/react-rating-tooltip/-/react-rating-tooltip-1.0.0.tgz","fileCount":3,"unpackedSize":22562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq2QNCRA9TVsSAnZWagAAjiMP/04xZNWsoV6VDhN2ChL5\nGjQf0mg5/vjt4Jx0NoXq7EHSQED17c3E4b8CoYIeE8WwQvOuS4SdZCoyrN6h\nFqRMBHea2NH0N+Cudf+Iuwe5z4elne1LlkbQfweKM9zKbp4tmbmm+KuuBuCQ\nQicWJ3uzFTXUL1+OA89HAm1OAutwQJHjM5tvpuk7TynXuXiJ0Qnf+vyZSlaX\n+WnRx5jxm3irmSk0OzbO+Q9yUwWKVkJIIJFT+MXuX1r20WFobQHl3Ok6eqHK\njlNDaVQHmIno51JZTbNN8ikbVdK2Cy/dWKo2xeGijQCdvqakvvUZ22ffIXGw\nyvFqVCo/uAZKGF076WMxl/XmAW1q8vJR84FgyFyv75ewvbMZrcYLoCtuEMiP\nTl3iOCzlb+byvyyZz0+Zx3tWRQ4Jd9cAbYox+tl2jIpzSdgd6WX6D8fIxezT\n+E55NgmaCW5Gd3EaLYySetN83F6KJHMSWywhcIHbte1YyPJ/qNp+MLPc6DcF\n0va+PA/Y/f4PWY6W9VThi/4Cbyzj4XC+8MErh0S5AlhcChcM51HCoqoQ/92t\nkbYa21+gJet+d215t62rqMGm9nMKllhCrbPv1VlE1XAj2DubolP6OeNDjwAy\nyygmVJkANhkiM8MSX/3w2/BAR0dgUvwH+eoIMHrf0gj12j6Mn2R9CTDVlybi\ntV9E\r\n=Wscx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuZBtxWYdGQmCP/FbG39RHAv1DQVAhNbkjqlBGH2k/VAiBZ7CMUFBpAUpuQpPxBGIwkbk/F/fHJeE2MpuSbWjPN8g=="}]},"_npmUser":{"name":"dakshkhetan","email":"2012daksh@gmail.com"},"directories":{},"maintainers":[{"name":"dakshkhetan","email":"2012daksh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-rating-tooltip_1.0.0_1621845004436_0.994718808204434"},"_hasShrinkwrap":false},"1.0.1":{"name":"@dakshkhetan/react-rating-tooltip","version":"1.0.1","description":"React Star Rating/Review Component with tooltip support","main":"./lib/Rating.js","license":"MIT","homepage":"https://github.com/dakshkhetan/react-rating-tooltip","repository":{"type":"git","url":"git+https://github.com/dakshkhetan/react-rating-tooltip.git"},"bugs":{"url":"https://github.com/dakshkhetan/react-rating-tooltip"},"keywords":["react","ratings","rating","star ratings","star-ratings","react-reviews","react-ratings","react-rating","react ratings","react rating"],"scripts":{"build":"webpack"},"peerDependencies":{"prop-types":"^15.6.0","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-core":"^6.21.0","babel-loader":"^7.1.4","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","css-loader":"^1.0.0","file-loader":"^1.1.11","path":"^0.12.7","prop-types":"^15.6.0","react":"^16.8.0","react-dom":"^16.8.0","style-loader":"^0.22.1","url-loader":"^1.0.1","webpack":"^4.5.0","webpack-cli":"^4.7.0"},"gitHead":"7d9f8b23316631ca0d124702ba4542afa98e914b","_id":"@dakshkhetan/react-rating-tooltip@1.0.1","_nodeVersion":"14.15.3","_npmVersion":"6.14.9","dist":{"integrity":"sha512-GQTQkCeA4JgraXb6KhpqPZplw2c36q/n6wjddVr0AgRVgxGzbu29GxyA59oWQUi2vBOo+B5cwG/MJ2EL0tF2Bw==","shasum":"a0a20401028f7e210494720b1c052c693c9ba139","tarball":"https://registry.npmjs.org/@dakshkhetan/react-rating-tooltip/-/react-rating-tooltip-1.0.1.tgz","fileCount":3,"unpackedSize":22698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq2W6CRA9TVsSAnZWagAAiuIP/AjXEEwgqQuzDI8oB9DE\nWj4Dma7dlQ6mMdam1i3ZMK+SUQwbyUdJaS+4ma8ifuO3iVpqiSeQuFiVxUyK\naEkXFjIslcBR+dwld+ihD/ZKzn7wEbDPVcrCckTa35hmJ9shFc4dMV216uex\n+Xxh8qr2D+2tL4ZSSkvzauPJEXbrkcvj+d14unIaOx2rIVbfsim54zIuFUiJ\nR9YXvu6ZsdDoeIQMMVXQ+1f3J0gxb+TLGXaqD3xx7BWKXVhvL3gKuG2WjKPK\nvnLRMQltLYGcmkeuWwiXY0vtzG46sb1qGHcVl6EaoCIBzgjoHHF5l6NEIoTJ\nItSo4ISHDn4to3KYbKQCcAumCD9c51KNjqOf0Gmr0j52bhIrEBaoxdlVjGLX\nl20nLZs79SMlnQos22aWflvk+sfrEsS1BM5nQy+XcLY4ucXFgyc8Uuy3uFGE\n5uRln6sSZFbFEWZPeCCcmDmprHEk82tx9mrsqlWchDIyqvYO2UyBX1109NMb\nwAfkoPug2nhMdJaI/PIE9NZKKbSVzuzfS01a2mc7BL4VJj2vfT9Pm8Oh8nN0\nw1QGYkeZYnaJEQrPUCrXAJO1KY91RHUQ4eSphnUuyk8h+MRu82j3AMRRVoqk\n1VxNPXjw7v1JkmO0M1G/DnBEvp8f6YtPCNMSXP0vZ5o7Nx/hCBpw9RULdQ7Q\nk7WZ\r\n=yQWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFdsDNvpbh120D2oS5VqCxPbXAwehmobSHr9+VRgtw7KAiEAjEl7le4JlOCwt4TOPirItqg8R6j2L/sUk3nTcR7cmbI="}]},"_npmUser":{"name":"dakshkhetan","email":"2012daksh@gmail.com"},"directories":{},"maintainers":[{"name":"dakshkhetan","email":"2012daksh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-rating-tooltip_1.0.1_1621845434458_0.18590987871008124"},"_hasShrinkwrap":false},"1.1.0":{"name":"@dakshkhetan/react-rating-tooltip","version":"1.1.0","description":"React Star Rating/Review Component with tooltip support","main":"./lib/Rating.js","types":"./lib/types","license":"MIT","repository":{"type":"git","url":"git+https://github.com/dakshkhetan/react-rating-tooltip.git"},"keywords":["react","ratings","rating","star ratings","star-ratings","react-reviews","react-ratings","react-rating","react ratings","react rating"],"scripts":{"build":"rm -rf lib && webpack","postbuild":"tsc"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"@types/node":"^15.6.0","@types/react":"^17.0.6","@types/react-dom":"^17.0.5","babel-core":"^6.21.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","css-loader":"^1.0.0","file-loader":"^1.1.11","fork-ts-checker-webpack-plugin":"^6.2.10","path":"^0.12.7","react":"^16.8.0","react-dom":"^16.8.0","style-loader":"^0.22.1","ts-loader":"^8.2.0","typescript":"^4.2.4","url-loader":"^1.0.1","webpack":"^4.5.0","webpack-cli":"^4.7.0"},"gitHead":"292e8040cc7013206bfd3799e102cbc90ac7ee41","bugs":{"url":"https://github.com/dakshkhetan/react-rating-tooltip/issues"},"homepage":"https://github.com/dakshkhetan/react-rating-tooltip#readme","_id":"@dakshkhetan/react-rating-tooltip@1.1.0","_nodeVersion":"14.15.3","_npmVersion":"6.14.9","dist":{"integrity":"sha512-tdDP2/ayWozY3r5PeAfbzaNaimctomae4YQYqGW8oZA+4hr1SIvw0wM57KhRi9JlR3LiAJXS/zX07pX6aBkHgA==","shasum":"5904aa1dc419f6adcdd1cf78118d57c5f5bc9e27","tarball":"https://registry.npmjs.org/@dakshkhetan/react-rating-tooltip/-/react-rating-tooltip-1.1.0.tgz","fileCount":6,"unpackedSize":29765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1js4CRA9TVsSAnZWagAADgwP/iI+Zt9v5zh3+lsHLxxj\n0bTxXn8R9oFb5BmGRnHGBzk/HsM6RaAs3XH2fm+VttpLAxb319W3hA5yMc66\n22BvvuQXgGjDXbSiI9FBmBU57QJyuY6zW6TJmbq17Npysv5eE4879gt/tmTU\nfe9XQ5Pz/tFWrfkUsw+v7XPhT/y7ImOb23EmfC7gKTOcdqm1YV0F3tdNhvyq\nMFFFoEMMTWTNVpb1z5jrWrdYus9MDuhtg7hPBoP54wLCoqPlH7zMfPrpSaux\nxC0Ju17k3zglWhujUmnTrQ5Bh5zu4PHRhyxC045Nq3dlG9AcJHF2Lcg9RJbj\nbEwGECZBYlyQL789MT71Vfr+keFnrKeXxF9snGyyK+mJ/KQkrYBmqMXdaYpD\nFxBQK1oZpGRl0XliTftZfEXtndMo5LVTcKV7SLblF30tUSh4J6uscR5mWqM0\nku5sy4MVe1z6UN077D1S8VtN3BZppXAvkMMgalQ41L4JLd/Q+V/ltBvsK3Lu\nkNOdGeA7pJohxEvSedxk49HmuzWxz5UTv6ucKSQ2fSWPnKWV6/hIB4Weg6V2\nrLQkhBiJ0kTWqhtifRd4eH8J19cl73W0hLfMuU7Oza/F0Y9r0eNg3N2+OfS6\nEs0uA1RXR4jnJoTcwEKKfPdRpzNqv20qfJbY/qH7jApfqnvZhXfKuSQlxzY7\nPcTK\r\n=ObXs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYnZECzAXLWvJkRMqYNBlmIHRM11oSjpQ1E8nyOQr0/AiAsFGRD71ya9WR7VlLztopY+KWn952DdpIDY/ve2wqKRQ=="}]},"_npmUser":{"name":"dakshkhetan","email":"2012daksh@gmail.com"},"directories":{},"maintainers":[{"name":"dakshkhetan","email":"2012daksh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-rating-tooltip_1.1.0_1624652599765_0.5965590872282318"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-24T08:30:04.341Z","1.0.0":"2021-05-24T08:30:04.618Z","modified":"2022-04-05T02:37:40.039Z","1.0.1":"2021-05-24T08:37:14.599Z","1.1.0":"2021-06-25T20:23:19.990Z"},"maintainers":[{"name":"dakshkhetan","email":"2012daksh@gmail.com"}],"description":"React Star Rating/Review Component with tooltip support","homepage":"https://github.com/dakshkhetan/react-rating-tooltip#readme","keywords":["react","ratings","rating","star ratings","star-ratings","react-reviews","react-ratings","react-rating","react ratings","react rating"],"repository":{"type":"git","url":"git+https://github.com/dakshkhetan/react-rating-tooltip.git"},"bugs":{"url":"https://github.com/dakshkhetan/react-rating-tooltip/issues"},"license":"MIT","readme":"# React-Rating-Tooltip\n\n#### [[Original repo](https://github.com/vilvaathibanpb/react-rating-tooltip) by [@vilvaathibanpb](https://github.com/vilvaathibanpb)]\n\nReact-rating-tooltip is a simple to use yet completely customizable component for getting use Rating/Reviews.\n\n- Fully CSS customizable - Styles of Rating Counter, star-container, selected status and tooltip style\n- Custom position of rating counter and selected status around the Rating\n- Active(Selected) & Inactive(Unselected) components of the rating\n- Customize Tooltip, clear rating etc.\n\n### Installation\n\nThis requires [React.js] to run.\n\n```sh\nnpm i react-rating-tooltip\n```\n\n### Demo\n\n### How to Use\n\nInstall and import react-rating-tooltip and pass the props as per the below table\n\n```sh\nimport React from 'react';\nimport Rating from 'react-rating-tooltip';\nimport 'font-awesome/css/font-awesome.min.css';\n\nclass SampleRating extends React.Component{\n\n    constructor(props) {\n        super(props);\n        this.state = {\n          max: 4,\n          defaultRating: 2,\n          counterPosition: 'left',\n          clearRating: true,\n          textPosition: 'right',\n          tooltipContent: [\"Very Bad\", \"Bad\", \"Fair\", \"Good\", \"Very Good\"],\n          ratingValue: [\"Very Bad\", \"Bad\", \"Fair\", \"Good\", \"Very Good\"],\n          starStyle: {\n              height: '28px',\n              backgroundColor: '#F2F2F2',\n              paddingLeft: '2px',\n              paddingRight: '2px',\n              color: '#F58220',\n              lineHeight: '28px',\n              marginLeft: '5px',\n              marginRight: '5px',\n          },\n          styleConfig: {\n            counterStyle: {\n              height: '28px',\n              backgroundColor: '#F58220',\n              paddingLeft: '12px',\n              paddingRight: '12px',\n              color: '#FFF',\n              lineHeight: '28px',\n            },\n            starContainer: {\n              fontSize: '24px',\n              backgroundColor: '#F2F2F2',\n              height: '28px',\n            },\n            statusStyle: {\n              height: '28px',\n              backgroundColor: '#F58220',\n              paddingLeft: '12px',\n              paddingRight: '12px',\n              color: '#FFF',\n              lineHeight: '28px',\n              minWidth: '100px',\n              fontSize: '18px',\n              textAlign: 'center',\n            },\n            tooltipStyle: {\n              fontSize: '14px',\n              padding: '5px',\n            }\n          }\n        }\n      }\n\n      handleChange = (RatingIndex, RatingValue) => {\n        console.log(RatingIndex, RatingValue);\n      }\n\n    render() {\n        return(\n            <Rating\n                max = {this.state.max}\n                defaultRating = {this.state.defaultRating}\n                counterPosition = {this.state.counterPosition}\n                clearRating = {this.state.clearRating}\n                textPosition = {this.state.textPosition}\n                tooltipContent = {this.state.tooltipContent}\n                ratingValue={this.state.ratingValue}\n                styleConfig = {this.state.styleConfig}\n                onChange={this.handleChange}\n                ActiveComponent={<i className=\"fa fa-star\" style={this.state.starStyle} />}\n                InActiveComponent={<i className=\"fa fa-star-o\" style={this.state.starStyle} />}\n            />\n        );\n    }\n}\n\nexport default SampleRating;\n```\n\n### Prop-Types\n\nDetails of the Props to be passed:\n\n| Prop-name         | Type               | Description                                                                                                                                                               |\n| ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| max               | Number             | `Required`. This determines the maximum number of Stars or Rating in the Component.                                                                                       |\n| defaultRating     | Number             | `Default value - 0`. This determines the current number of selected Stars or Rating in the Component.                                                                     |\n| counterPosition   | String             | `Possible Values - ['left', 'right']`. This determines the position of the Rating Count in the Component. If not passed, Count will not be displayed.                     |\n| textPosition      | String             | `Possible Values - ['left', 'right']`. This determines the position of the Rating Value (Status) in the Component. If not passed, Select value will not be displayed.     |\n| clearRating       | Boolean            | `Default Value - true`. This determines whether the rating can be cleared/reset. If passed true, clicking again on the same rating count will clear the rating.           |\n| disabled          | Boolean            | `Default Value - false`. This determines whether the rating can be enabled/disabled. If passed true, the rating component will be disabled and act as Read only component |\n| tooltipContent    | Array              | The Array of values as tooltip. Tooltips Values are matched to Rating count based on index. If not passed, tooltip will not be added                                      |\n| ratingValue       | Array              | The Array of values for Rating count. Rating Values are matched to Rating count based on index. If not passed, Values will not be set                                     |\n| onChange          | Function           | `Required`. A callback function which gets two arguements on every change of Rating - `Rating count, Rating Value (if passed)`                                            |\n| ActiveComponent   | React/HTML Element | `Required`. The component or element to be considered as Selected rating                                                                                                  |\n| InActiveComponent | React/HTML Element | `Required`. The component or element to be considered as Left-out rating                                                                                                  |\n| styleConfig       | Object             | `See the below table for more details`. Its a Nested object with specific styles for specific parts of the Component                                                      |\n\n### styleConfig Details\n\nDetails of the styleConfig:\n\n| Prop-name     | Type   | Description                                                                                         |\n| ------------- | ------ | --------------------------------------------------------------------------------------------------- |\n| counterStyle  | Object | CSS styles to be applied to the Part of the component where the Rating count is displayed           |\n| starContainer | Object | CSS styles to be applied to the Part of the component container where the stars/Rating is displayed |\n| statusStyle   | Object | CSS styles to be applied to the Part of the component where the Rating value/status is displayed    |\n| tooltipStyle  | Object | CSS styles to be applied to the tooltips of the component                                           |\n\n**Please check the example for styleConfig**\n\n### Props:\n\n#### Prop-Types:\n\n```sh\n{\n      max: PropTypes.number.isRequired,\n      defaultRating: PropTypes.number,\n      counterPosition: PropTypes.oneOf(['left', 'right']),\n      clearRating: PropTypes.bool,\n      disabled: PropTypes.bool,\n      textPosition: PropTypes.oneOf(['left', 'right']),\n      tooltipContent: PropTypes.array,\n      ratingValue: PropTypes.array,\n      styleConfig: PropTypes.shape({\n        counterStyle: PropTypes.object,\n        starContainer: PropTypes.object,\n        statusStyle: PropTypes.object,\n        tooltipStyle: PropTypes.object,\n      }),\n      onChange: PropTypes.func.isRequired,\n      ActiveComponent: PropTypes.oneOfType([\n        PropTypes.node,\n        PropTypes.element\n      ]).isRequired,\n      InActiveComponent: PropTypes.oneOfType([\n        PropTypes.node,\n        PropTypes.element\n      ]).isRequired,\n}\n```\n\n#### Default-Props\n\n```sh\n{\n      clearRating: true,\n      disabled: false,\n      defaultRating: 0,\n      styleConfig: {\n        counterStyle: {\n          height: '28px',\n          backgroundColor: '#F58220',\n          paddingLeft: '12px',\n          paddingRight: '12px',\n          color: '#FFF',\n          lineHeight: '28px',\n        },\n        starContainer: {\n          fontSize: '24px',\n          backgroundColor: '#F2F2F2',\n          height: '28px',\n        },\n        statusStyle: {\n          height: '28px',\n          backgroundColor: '#F58220',\n          paddingLeft: '12px',\n          paddingRight: '12px',\n          color: '#FFF',\n          lineHeight: '28px',\n          minWidth: '100px',\n          fontSize: '18px',\n          textAlign: 'center',\n        },\n        tooltipStyle: {\n          fontSize: '14px',\n          padding: '5px',\n        }\n    }\n}\n```\n\n## Contribution\n\nYou are welcome to raise issues and PRs in the repository.\n","readmeFilename":"README.md"}