{"_id":"@achadha235/react-tree-select","_rev":"3-5932d22196311a768fdebbb3093fe177","name":"@achadha235/react-tree-select","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@achadha235/react-tree-select","version":"1.0.0","author":{"name":"Abhishek Chadha"},"private":false,"keywords":["react"],"license":"ISC","description":"A React component that renders a tree of selectable tags","types":"./dist/index.d.ts","exports":{".":"./dist/index.js","./style":"./dist/style.css"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@chromatic-com/storybook":"^1.2.25","@storybook/addon-essentials":"^8.0.5","@storybook/addon-interactions":"^8.0.5","@storybook/addon-links":"^8.0.5","@storybook/addon-onboarding":"^8.0.5","@storybook/blocks":"^8.0.5","@storybook/react":"^8.0.5","@storybook/react-vite":"^8.0.5","@storybook/test":"^8.0.5","@types/react":"^18.2.73","@types/react-dom":"^18.2.23","chromatic":"^11.3.0","storybook":"^8.0.5","typescript":"^5.4.3","vite":"^5.2.7"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"storybook dev -p 6006","build-storybook":"storybook build","build":"tsc && cp ./src/style.css ./dist/style.css","chromatic":"npx chromatic --project-token=chpt_43330034e83c5b3"},"_id":"@achadha235/react-tree-select@1.0.0","_integrity":"sha512-g1jZPV6hOGmhkKC7sx7h9df4QHFQjJ8wsJesNdqVyHp8RgpyyL7/qDkBhyiCedlbIJ3DeWlBdF9gZ/rZf1Kiig==","_resolved":"/private/var/folders/l5/mn8031k94dv4wq9qpx2xkgqc0000gn/T/c7444e06c4a175de277053c29207f6f3/achadha235-react-tree-select-1.0.0.tgz","_from":"file:achadha235-react-tree-select-1.0.0.tgz","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-g1jZPV6hOGmhkKC7sx7h9df4QHFQjJ8wsJesNdqVyHp8RgpyyL7/qDkBhyiCedlbIJ3DeWlBdF9gZ/rZf1Kiig==","shasum":"e4ac1b01fac716addbffc5f8209346901f8986b6","tarball":"https://registry.npmjs.org/@achadha235/react-tree-select/-/react-tree-select-1.0.0.tgz","fileCount":10,"unpackedSize":31772,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1kBL5wxabAj/Is46UZWZ68N4Xz9cTMIXsCg7PNA8PCQIhANlJeuXBryGu/uQsy9qTLzJ202ALqZRgaTP+qxrTJGBo"}]},"_npmUser":{"name":"achadha235","email":"abhishekchadha235@gmail.com"},"directories":{},"maintainers":[{"name":"achadha235","email":"abhishekchadha235@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tree-select_1.0.0_1711895734945_0.6993989166168575"},"_hasShrinkwrap":false},"1.0.1":{"name":"@achadha235/react-tree-select","version":"1.0.1","author":{"name":"Abhishek Chadha"},"private":false,"keywords":["react"],"license":"ISC","description":"A React component that renders a tree of selectable tags","types":"./dist/index.d.ts","exports":{".":"./dist/index.js","./style":"./dist/style.css"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@chromatic-com/storybook":"^1.2.25","@storybook/addon-essentials":"^8.0.5","@storybook/addon-interactions":"^8.0.5","@storybook/addon-links":"^8.0.5","@storybook/addon-onboarding":"^8.0.5","@storybook/blocks":"^8.0.5","@storybook/react":"^8.0.5","@storybook/react-vite":"^8.0.5","@storybook/test":"^8.0.5","@types/react":"^18.2.73","@types/react-dom":"^18.2.23","chromatic":"^11.3.0","storybook":"^8.0.5","typescript":"^5.4.3","vite":"^5.2.7"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"storybook dev -p 6006","build-storybook":"storybook build","build":"tsc && cp ./src/style.css ./dist/style.css","chromatic":"npx chromatic --project-token=chpt_43330034e83c5b3"},"_id":"@achadha235/react-tree-select@1.0.1","_integrity":"sha512-wzCaO8yHpcQlCN6l3SBUtppQEDTTMqCVfGP+03fSLiWU2rsJ+/n6NFAtU/k++LJaV6kGH6Y6RSA1iFKDmok8uw==","_resolved":"/private/var/folders/l5/mn8031k94dv4wq9qpx2xkgqc0000gn/T/4a39da1978e228149a310ed53f8fbc3c/achadha235-react-tree-select-1.0.1.tgz","_from":"file:achadha235-react-tree-select-1.0.1.tgz","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-wzCaO8yHpcQlCN6l3SBUtppQEDTTMqCVfGP+03fSLiWU2rsJ+/n6NFAtU/k++LJaV6kGH6Y6RSA1iFKDmok8uw==","shasum":"bfbb08634ed48ebf6ce1488e544f9a38f91b93d0","tarball":"https://registry.npmjs.org/@achadha235/react-tree-select/-/react-tree-select-1.0.1.tgz","fileCount":8,"unpackedSize":10663,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxPEh59U3LVLpKuZ6YV1t2eoUlRt0H2D17ggFtGYqeSAiEA9PrHlF6KjImWkKpjrUC0C7lnmwsQVe8gAn9b6IXRlRg="}]},"_npmUser":{"name":"achadha235","email":"abhishekchadha235@gmail.com"},"directories":{},"maintainers":[{"name":"achadha235","email":"abhishekchadha235@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tree-select_1.0.1_1711895949845_0.720869975901431"},"_hasShrinkwrap":false},"1.0.2":{"name":"@achadha235/react-tree-select","version":"1.0.2","author":{"name":"Abhishek Chadha"},"private":false,"keywords":["react-component","react","tree","select","html"],"license":"ISC","description":"A React component that renders a tree of selectable tags","types":"./dist/index.d.ts","exports":{".":"./dist/index.js","./style":"./dist/style.css"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@chromatic-com/storybook":"^1.2.25","@storybook/addon-essentials":"^8.0.5","@storybook/addon-interactions":"^8.0.5","@storybook/addon-links":"^8.0.5","@storybook/addon-onboarding":"^8.0.5","@storybook/blocks":"^8.0.5","@storybook/react":"^8.0.5","@storybook/react-vite":"^8.0.5","@storybook/test":"^8.0.5","@types/react":"^18.2.73","@types/react-dom":"^18.2.23","chromatic":"^11.3.0","storybook":"^8.0.5","typescript":"^5.4.3","vite":"^5.2.7"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"storybook dev -p 6006","build-storybook":"storybook build","build":"tsc && cp ./src/style.css ./dist/style.css","chromatic":"npx chromatic --project-token=chpt_43330034e83c5b3"},"_id":"@achadha235/react-tree-select@1.0.2","_integrity":"sha512-DM0mtOufLF/+QG6nbKUaJJhdhQEGSweQQyjeo11nIwOMz5F4gwlcnjxyoYm4GCyHSuxniLV5NzBUkUczQNNGJg==","_resolved":"/private/var/folders/l5/mn8031k94dv4wq9qpx2xkgqc0000gn/T/dd45cd14f11cc5d5a177008702d4404b/achadha235-react-tree-select-1.0.2.tgz","_from":"file:achadha235-react-tree-select-1.0.2.tgz","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-DM0mtOufLF/+QG6nbKUaJJhdhQEGSweQQyjeo11nIwOMz5F4gwlcnjxyoYm4GCyHSuxniLV5NzBUkUczQNNGJg==","shasum":"960ebdfefdb27abc9c580bd109e33f9598ff4ff5","tarball":"https://registry.npmjs.org/@achadha235/react-tree-select/-/react-tree-select-1.0.2.tgz","fileCount":8,"unpackedSize":13215,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7HN133erEulvieNj2i5yVrOdJQPaxJeJ87iFNNAQyMAiEA2Z0HzAlpGTihIr8pe0HUV60vvl/QBnzDdEV1ZrqZS2w="}]},"_npmUser":{"name":"achadha235","email":"abhishekchadha235@gmail.com"},"directories":{},"maintainers":[{"name":"achadha235","email":"abhishekchadha235@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tree-select_1.0.2_1711903243877_0.45472765374666446"},"_hasShrinkwrap":false},"1.0.3":{"name":"@achadha235/react-tree-select","version":"1.0.3","description":"A React component that renders a tree of selectable tags","author":{"name":"Abhishek Chadha"},"private":false,"keywords":["react-component","react","tree","select","html"],"homepage":"https://github.com/achadha235/react-tree-select#readme","repository":{"type":"git","url":"git+https://github.com/achadha235/react-tree-select.git"},"license":"ISC","types":"./dist/index.d.ts","exports":{".":"./dist/index.js","./style":"./dist/style.css"},"dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@chromatic-com/storybook":"^1.2.25","@storybook/addon-essentials":"^8.0.5","@storybook/addon-interactions":"^8.0.5","@storybook/addon-links":"^8.0.5","@storybook/addon-onboarding":"^8.0.5","@storybook/blocks":"^8.0.5","@storybook/react":"^8.0.5","@storybook/react-vite":"^8.0.5","@storybook/test":"^8.0.5","@types/react":"^18.2.73","@types/react-dom":"^18.2.23","chromatic":"^11.3.0","storybook":"^8.0.5","typescript":"^5.4.3","vite":"^5.2.7"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","storybook":"storybook dev -p 6006","build-storybook":"storybook build","build":"tsc && cp ./src/style.css ./dist/style.css","chromatic":"npx chromatic --project-token=chpt_43330034e83c5b3"},"bugs":{"url":"https://github.com/achadha235/react-tree-select/issues"},"_id":"@achadha235/react-tree-select@1.0.3","_integrity":"sha512-vzp89ZfhwibxzQr+HlzwQHYUjFTEqquoCMo3zBTtKESEiyfuw4Np2LnjPpjr1DoxpaJsJIGJZmlmjrGUDtSRWQ==","_resolved":"/private/var/folders/l5/mn8031k94dv4wq9qpx2xkgqc0000gn/T/9863850fc7e6529e83291f09ef55d792/achadha235-react-tree-select-1.0.3.tgz","_from":"file:achadha235-react-tree-select-1.0.3.tgz","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-vzp89ZfhwibxzQr+HlzwQHYUjFTEqquoCMo3zBTtKESEiyfuw4Np2LnjPpjr1DoxpaJsJIGJZmlmjrGUDtSRWQ==","shasum":"49d9db140e377b661fe97e4d890080aa756a188b","tarball":"https://registry.npmjs.org/@achadha235/react-tree-select/-/react-tree-select-1.0.3.tgz","fileCount":8,"unpackedSize":13354,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvTprS1n8wnnNQWjhkt/TKZifBQlmGNV/u8IAXI7sV+wIhAPlNHfGO/s0Wf01UwdCAAjV+LXMOmi0t9KNl0C7Oi1iP"}]},"_npmUser":{"name":"achadha235","email":"abhishekchadha235@gmail.com"},"directories":{},"maintainers":[{"name":"achadha235","email":"abhishekchadha235@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-tree-select_1.0.3_1711903464298_0.9572366357012554"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-31T14:35:34.868Z","1.0.0":"2024-03-31T14:35:35.125Z","modified":"2024-03-31T16:44:24.604Z","1.0.1":"2024-03-31T14:39:10.000Z","1.0.2":"2024-03-31T16:40:44.045Z","1.0.3":"2024-03-31T16:44:24.445Z"},"maintainers":[{"name":"achadha235","email":"abhishekchadha235@gmail.com"}],"description":"A React component that renders a tree of selectable tags","keywords":["react-component","react","tree","select","html"],"author":{"name":"Abhishek Chadha"},"license":"ISC","readme":"# react-tree-select\n\nA very simple component to select options organized in a tree structure\n\n## [👉 Try it out](https://main--66096c98835a62cb2461bc8e.chromatic.com/?path=/docs/example-treeselect--docs)\n\n![DEMO](https://github.com/achadha235/react-tree-select/assets/1176261/a0e880dd-51b5-4469-a5d3-dc2f0f03d8f2)\n\n\n\n## Install\n```\npnpm add @achadha235/react-tree-select\n```\n## Usage\n```ts\nimport React, { useState } from \"react\";\n\n// Default styles for the component\nimport \"@achadha235/react-tree-select/style\"\nimport { TreeSelect } from \"@achadha235/react-tree-select\"\n\nconst tags = [\n  \"Tag 1\",\n  \"Tag 2\",\n  {\n    value: \"Tag 3\",\n    subtags: [\n      \"Tag 3.1\",\n      \"Tag 3.2\",\n      {\n        value: \"Tag 3.3\",\n        subtags: [\"Tag 3.3.1\", \"Tag 3.3.2\"],\n      },\n    ],\n  },\n];\n\nexport function MyComponent() {\n  const [selected, setSelected] = useState({});\n  return (\n    <div style={styles.container}>\n      <TreeSelect\n        tags={tags}\n        onSelect={(newSelected) => setSelected(newSelected)}\n        selected={selected}\n      />\n    </div>\n  );\n}\n\nconst styles = {\n  container: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: 2,\n  },\n};\n```\n\n## Customizing Styles\n\nThe default styles can be imported into your project using the import below\n```\nimport \"@achadha235/react-tree-select/style\"\n```\n\nHowever, if you'd like to customize the styles, you can include your own CSS. Just override the following classes to change the styles.\n\n```css\n.tree-select {\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n.tree-select.tag {\n  border: 2px solid black;\n  border-radius: 8px;\n  transition: all;\n  padding: 4px 10px;\n  background-color: white;\n  cursor: pointer;\n}\n\n.tree-select.tag.active {\n  background-color: orange;\n}\n\n.tree-select.tag:hover {\n  background-color: lightgray;\n}\n\n.tree-select.tag.active:hover {\n  background-color: rgb(243, 200, 118);\n}\n\n.tree-select.tag:active {\n  background-color: rgb(243, 200, 118);\n}\n```\n\n## Avaliable Props \n\n| prop       \t| description                                                                    \t| type                                       \t|\n|------------\t|--------------------------------------------------------------------------------\t|--------------------------------------------\t|\n| selected   \t| An object where the options are keys and values are true if they are selected  \t| Record<string, boolean>                    \t|\n| onSelected \t| Callback that is triggered when the selected options are changed               \t| (updated: Record<string, boolean>) => void \t|\n| tags       \t| An nested array containing all the available options                           \t| Array                             \n\n\n","readmeFilename":"README.md","homepage":"https://github.com/achadha235/react-tree-select#readme","repository":{"type":"git","url":"git+https://github.com/achadha235/react-tree-select.git"},"bugs":{"url":"https://github.com/achadha235/react-tree-select/issues"}}