{"_id":"@branescamilla/react-circular-slider","_rev":"1-384c0649869cf7602539031f12dc4de7","name":"@branescamilla/react-circular-slider","dist-tags":{"latest":"2.3.5"},"versions":{"2.3.5":{"name":"@branescamilla/react-circular-slider","version":"2.3.5","description":"Fork from @Seehawer A customizable circular slider with no dependencies.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/brandonescamilla/react-circular-slider.git"},"keywords":["react slider","round slider","circle slider","circular slider","radial slider","react","circular","radial","slider","react hooks"],"author":{"name":"Fidel Seehawer"},"license":"MIT","bugs":{"url":"https://github.com/brandonescamilla/react-circular-slider/issues"},"homepage":"https://fseehawer.github.io/react-circular-slider/","peerDependencies":{"global":"^4.4.0","react":"^16.12.0","react-dom":"^16.12.0"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.9.0","@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","babel-loader":"^8.1.0","css-loader":"^3.5.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","eslint-utils":"^1.4.1","global":"^4.4.0","prop-types":"^15.7.2","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.1","serialize-javascript":"^3.1.0","webpack-cli":"^3.3.11"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject","build-npm":"webpack","gh-pages":"git subtree push --prefix build origin gh-pages && git push -u origin master","build-commit-push":"func() { npm run build-npm && npm run build && git add --all && git commit -m \"$1\" && npm run gh-pages && npm publish --access public; }; func"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"gitHead":"dbe1b41da8f9e00333fa1fe5634b03e6212fdedb","_id":"@branescamilla/react-circular-slider@2.3.5","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-08WMYUFGq2l7aJ8aB2IZHXUJei2pmqWsXZVWVFDunAhZR9i+yBSaDLhq7/eRFs1zkBkIbcjp6cqjZgsZ08faYQ==","shasum":"cde7944183453a609f28657469260b6e07e2245b","tarball":"https://registry.npmjs.org/@branescamilla/react-circular-slider/-/react-circular-slider-2.3.5.tgz","fileCount":34,"unpackedSize":280556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglF2VCRA9TVsSAnZWagAAcxQP/j9Oqe3gYetVA3xnv2Wh\n/mk65iw832KjSyh9H9AZAqLoWDsGL+dxlpMe9vZmeLWOgYvI2B19qq8Z/HSZ\nKdl58tMYUGTuIoRmIavSEVf51NLfJQGmNMDA8pJeQvDpIRDHVMD2/iQFRBNu\nJR2c7s57K2DADNwDqY7xErPaE3qJdt4Ag7mnUPeGdo3Spb/3h4JzCJpAGLyj\nZFPi7t0Pjk4ka1ExWrRT+vrYET0n8n8hEGRHe5hJnboqJkXWZqM/MAuYV3sg\nmCDW0JNG0bjfaKpRL03X/0PTU06bH0iCwppE4RE5mc61En6EUCU4CWwrowl1\naudnEVnD/IA3htPH/MF7JwW4Zn60GI6OjyafKvwpw1EKPTqOT4lJ3mleKDPG\nB2i3PSk7D99ojVy24bqYWOCs/U+kHbXCV/cKbE5VSBLP8HHByN2ms5oN8VaR\nnUzbmNXiXB+i4VQucVlpqiQK378JC4FCIAGihGKDPr3qjpTb2tvZQO1V2LMo\niAaSXltwcC/HhnTfnzA+p9HA35PYvzr7GXaiiZjJKuIymStFmFYdRANeTuFQ\n930WJl7tqdxRbvmPEnxgCJN7zvDLOFQekULnkKLFGA4/A+4B18aJBWD5O96e\nkHHZJXJ1wJ3zhdC1AEQvaFrP+VjCi+NO5XJ34Znf/TPrL9qwiNVGgRKJboFy\nS8Tg\r\n=CrwB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGqnZt/+qv6Y4GZ4IC5buIGe9NgeByh3WPTwRoG5eLwYAiBII5+uxE2+8ooFzPllgfIeMCxGP5P9hEH88FH4YI2+Og=="}]},"_npmUser":{"name":"branescamilla","email":"brandon.escamilla@outlook.com"},"directories":{},"maintainers":[{"name":"branescamilla","email":"brandon.escamilla@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-circular-slider_2.3.5_1620336020826_0.214568617923939"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-06T21:20:20.765Z","2.3.5":"2021-05-06T21:20:21.078Z","modified":"2022-04-04T20:26:50.786Z"},"maintainers":[{"name":"branescamilla","email":"brandon.escamilla@outlook.com"}],"description":"Fork from @Seehawer A customizable circular slider with no dependencies.","homepage":"https://fseehawer.github.io/react-circular-slider/","keywords":["react slider","round slider","circle slider","circular slider","radial slider","react","circular","radial","slider","react hooks"],"repository":{"type":"git","url":"git+https://github.com/brandonescamilla/react-circular-slider.git"},"author":{"name":"Fidel Seehawer"},"bugs":{"url":"https://github.com/brandonescamilla/react-circular-slider/issues"},"license":"MIT","readme":"# react-circular-slider\n\n![](https://img.shields.io/badge/version-2.2.4-green.svg) ![](https://img.shields.io/badge/license-MIT-blue.svg)\n\nA highly customizable circular slider with no dependencies. See some [live demos here!](https://fseehawer.github.io/react-circular-slider/)\n\n\"CircularSlider\n\n## install\n\n```\nnpm install @fseehawer/react-circular-slider\n```\n\n## example\n\n```javascript\nimport React from 'react';\nimport CircularSlider from '@fseehawer/react-circular-slider';\n\nconst App = () => {\n return (\n { console.log(value); } }\n />\n )\n};\n\nexport default App;\n```\n\nUse min and max props to define the range of numbers. Use prependToValue/appendToValue if you want to prepend/append e.g. \"$\" or \"°\" to the value. Or simply use the data prop and pass any number or string sequence as an array to be spread in 360°. See some [live demos here!](https://fseehawer.github.io/react-circular-slider/)\n\n```javascript\nimport React from 'react';\nimport CircularSlider from '@fseehawer/react-circular-slider';\n\nconst App = () => {\n return (\n { console.log(value); } }\n />\n )\n};\n\nexport default App;\n```\n\n## Props\n\nprop | type | default | Affects\n---------------------|--------|---------------|--------\nwidth | number | 280 | width of the slider\ndirection | number | 1 | clockwise (**1**) or anticlockwise (**-1**)\nmin | number | 0 | smallest value\nmax | number | 360 | largest value\ndata | array | [] | array of data to be spread in 360°\ndataIndex | number | 0 | initially place knob at a certain value in the array\nknobColor | string | #4e63ea | knob color\nknobSize | number | 32 | knob size\nhideKnob | boolean| false | hide knob\nknobDraggable | boolean| true | knob not draggable\nknobPosition | string | top | knob's 0 position to be **top**, **right**, **bottom** or **left**\nlabel | string | ANGLE | label\nlabelColor | string | #272b77 | label and value color\nlabelBottom | boolean| false | label position at bottom\nlabelFontSize | string | 1rem | label font-size\nvalueFontSize | string | 4rem | label value font-size\nappendToValue | string | '' | append character to value\nprependToValue | string | '' | prepend character to value\nrenderLabelValue | jsx | null | add custom jsx code for the labels and styles\nverticalOffset | string | 2rem | vertical offset of the label and value\nhideLabelValue | boolean| false | hide label and value\nprogressColorFrom | string | #80C3F3 | progress track gradient start color\nprogressColorTo | string | #4990E2 | progress track gradient end color\nprogressSize | number | 8 | progress track size\nprogressLineCap | string | round | progress track cap to be **round** or **flat**\ntrackColor | string | #DDDEFB | background track color\ntrackSize | number | 8 | background track size\nonChange | func | value => {} | returns label value\n\n\n## license\n\n[MIT License](https://opensource.org/licenses/MIT)\n","readmeFilename":"README.md"}