{"_id":"@burzomir/color-mode-detector-react","_rev":"3-bc7793d8e8ba66021ee469cb546d925a","name":"@burzomir/color-mode-detector-react","dist-tags":{"latest":"2.0.1"},"versions":{"1.0.0":{"name":"@burzomir/color-mode-detector-react","version":"1.0.0","keywords":[],"author":"","license":"ISC","_id":"@burzomir/color-mode-detector-react@1.0.0","maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"dist":{"shasum":"fe313dba5e326e867b6b703fe507da23474e9ef2","tarball":"https://registry.npmjs.org/@burzomir/color-mode-detector-react/-/color-mode-detector-react-1.0.0.tgz","fileCount":12,"integrity":"sha512-+c+ToBJMrKuGCdYsjuZcisLbuKSNZPmggpBtwxigyI3ChOOoIMxt517XE0GxoaUWnmEYbPCk2lMjJA3ywpH2xQ==","signatures":[{"sig":"MEYCIQD7BGS/8eaDtmyIfDMenCk2aPUs+Fj+vUBg6fIxM9u+ygIhAIJtmu4t0th6M/F2grrHahN8IZGbrBqzeiuKpC5lq4CV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12267},"main":"dist/main.js","types":"dist/types.d.ts","module":"dist/module.js","source":"src/index.tsx","browser":"dist/browser.js","gitHead":"4368d37ac1879a3b47efadb3fc558f3ea15259f9","scripts":{"lint":"eslint","test":"jest","build":"rm -rf ./.parcel-cache && rm -rf ./dist && parcel build","watch":"parcel watch","format":"prettier . --write"},"_npmUser":{"name":"burzomir","email":"burzomirdev@gmail.com"},"_npmVersion":"10.8.2","description":"Welcome to **React Color Mode Detector Hook** – a simple and effective React wrapper around the core **Color Mode Detector** library. This hook provides a seamless way to integrate color mode detection and management into your React applications, enabling","directories":{},"lint-staged":{"src/**/*.ts":["npm run format","npm run lint"],"src/**/*.tsx":["npm run format","npm run lint"]},"_nodeVersion":"22.5.1","dependencies":{"@burzomir/color-mode-detector":"^1.0.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.4","eslint":"^9.9.0","parcel":"^2.12.0","globals":"^15.9.0","ts-jest":"^29.2.4","prettier":"^3.3.3","@eslint/js":"^9.9.0","typescript":"^5.5.4","@types/jest":"^29.5.12","lint-staged":"^15.2.9","typescript-eslint":"^8.1.0","@parcel/packager-ts":"^2.12.0","eslint-plugin-react":"^7.35.0","@testing-library/react":"^12.1.5","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.8","@parcel/transformer-typescript-types":"^2.12.0"},"peerDependencies":{"react":">=16.8.0 < 18.0.0","@types/react":">=16.8.0 < 18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/color-mode-detector-react_1.0.0_1724148199259_0.2142993237977544","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@burzomir/color-mode-detector-react","version":"1.0.1","keywords":[],"author":"","license":"ISC","_id":"@burzomir/color-mode-detector-react@1.0.1","maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"dist":{"shasum":"296261fc23ff9b7ba58493dbc9674f9c5a27c55c","tarball":"https://registry.npmjs.org/@burzomir/color-mode-detector-react/-/color-mode-detector-react-1.0.1.tgz","fileCount":12,"integrity":"sha512-/Usb+qcFxLLOKCRucz8gHXa/np5t6SzZSS0wHw72lzjXcJcme9+uAr/Qsc8Mb1X1asglxKKR09huKbEXNCPjOA==","signatures":[{"sig":"MEUCIQC4D43VN9909d4O2JgwHaHnkBgCw9N1n2DfYRGf1V+YywIgP1AWqj/lDZDNcV2AThLJCYNIw2n5O9BFpNHVLloaW9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11989},"main":"dist/main.js","types":"dist/types.d.ts","module":"dist/module.js","source":"src/index.tsx","browser":"dist/browser.js","gitHead":"57d341da0e619c048e125eebdd7cf0ef961d4bef","scripts":{"lint":"eslint","test":"jest","build":"rm -rf ./.parcel-cache && rm -rf ./dist && parcel build","watch":"parcel watch","format":"prettier . --write"},"_npmUser":{"name":"burzomir","email":"burzomirdev@gmail.com"},"_npmVersion":"10.8.2","description":"Welcome to **React Color Mode Detector Hook** – a simple and effective React wrapper around the core **Color Mode Detector** library. This hook provides a seamless way to integrate color mode detection and management into your React applications, enabling","directories":{},"lint-staged":{"src/**/*.ts":["npm run format","npm run lint"],"src/**/*.tsx":["npm run format","npm run lint"]},"_nodeVersion":"22.5.1","dependencies":{"@burzomir/color-mode-detector":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.4","eslint":"^9.9.0","parcel":"^2.12.0","globals":"^15.9.0","ts-jest":"^29.2.4","prettier":"^3.3.3","@eslint/js":"^9.9.0","typescript":"^5.5.4","@types/jest":"^29.5.12","lint-staged":"^15.2.9","typescript-eslint":"^8.1.0","@parcel/packager-ts":"^2.12.0","eslint-plugin-react":"^7.35.0","@testing-library/react":"^12.1.5","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.8","@parcel/transformer-typescript-types":"^2.12.0"},"peerDependencies":{"react":">=16.8.0 < 18.0.0","@types/react":">=16.8.0 < 18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/color-mode-detector-react_1.0.1_1724159115632_0.32231645185337143","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@burzomir/color-mode-detector-react","version":"2.0.0","keywords":[],"author":"","license":"ISC","_id":"@burzomir/color-mode-detector-react@2.0.0","maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"dist":{"shasum":"19dc3bb0cc75877b3c9a6752252a5d0438f3f084","tarball":"https://registry.npmjs.org/@burzomir/color-mode-detector-react/-/color-mode-detector-react-2.0.0.tgz","fileCount":12,"integrity":"sha512-Rc3T9ac7V4Bt/QUbvOZy+ajTD5fHH9EwVbkukbm8hfqvYPrlKf98Me9w5hcNPmNB9iIzuYoV/GpBYZDQro+kpw==","signatures":[{"sig":"MEUCIQCt414y0EV2bQEj3tFzDUUdn4EIui0gRQ4rIMPZ26JMNAIgP4uiXcLBkrrnyyCXDjku9owmF154wCX8+JX34UREQIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13890},"main":"dist/main.js","types":"dist/types.d.ts","module":"dist/module.js","source":"src/index.tsx","browser":"dist/browser.js","gitHead":"0a97c70e2e95e9b8ef93b49bcd2a58cacacf664b","scripts":{"lint":"eslint","test":"jest","build":"rm -rf ./.parcel-cache && rm -rf ./dist && parcel build","watch":"parcel watch","format":"prettier . --write"},"_npmUser":{"name":"burzomir","email":"burzomirdev@gmail.com"},"_npmVersion":"10.8.2","description":"Welcome to **React Color Mode Detector Hook** – a simple and effective React wrapper around the core **Color Mode Detector** library. This hook provides a seamless way to integrate color mode detection and management into your React applications, enabling","directories":{},"lint-staged":{"src/**/*.ts":["npm run format","npm run lint"],"src/**/*.tsx":["npm run format","npm run lint"]},"_nodeVersion":"22.5.1","dependencies":{"@burzomir/color-mode-detector":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","husky":"^9.1.4","eslint":"^9.9.0","parcel":"^2.12.0","globals":"^15.9.0","ts-jest":"^29.2.4","prettier":"^3.3.3","@eslint/js":"^9.9.0","typescript":"^5.5.4","@types/jest":"^29.5.12","lint-staged":"^15.2.9","typescript-eslint":"^8.1.0","@parcel/packager-ts":"^2.12.0","eslint-plugin-react":"^7.35.0","@testing-library/react":"^16.0.0","eslint-config-prettier":"^9.1.0","jest-environment-jsdom":"^29.7.0","@testing-library/jest-dom":"^6.4.8","@parcel/transformer-typescript-types":"^2.12.0"},"peerDependencies":{"react":"^18.3.1","@types/react":"^18.3.3"},"_npmOperationalInternal":{"tmp":"tmp/color-mode-detector-react_2.0.0_1724159201249_0.007734194934437388","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@burzomir/color-mode-detector-react","version":"2.0.1","main":"dist/main.js","module":"dist/module.js","browser":"dist/browser.js","source":"src/index.tsx","types":"dist/types.d.ts","scripts":{"watch":"parcel watch","build":"rm -rf ./.parcel-cache && rm -rf ./dist && parcel build","lint":"eslint","format":"prettier . --write","test":"jest"},"author":{"name":"Michał Kłobukowski"},"license":"MIT","description":"A lightweight React library for detecting and managing color modes (light/dark) in web applications. Simple to use, with an intuitive API for subscribing to color mode changes and customizing user interfaces accordingly.","repository":{"type":"git","url":"git+https://github.com/burzomir/color-mode-detector-react.git"},"bugs":{"url":"https://github.com/burzomir/color-mode-detector-react/issues"},"dependencies":{"@burzomir/color-mode-detector":"^2.0.0"},"peerDependencies":{"@types/react":"^18.3.3","react":"^18.3.1"},"browserslist":"> 0.5%, last 2 versions, not dead","keywords":["color-mode","color-scheme","dark-mode","light-mode","theme","color-theme","theme-detector","dark-theme","light-theme","color-mode-detection","color-scheme-detection","responsive-design","javascript","typescript","web-development","frontend","UI","user-preferences","custom-themes","css","web-apps","react"],"devDependencies":{"@eslint/js":"^9.9.0","@parcel/packager-ts":"^2.12.0","@parcel/transformer-typescript-types":"^2.12.0","@testing-library/jest-dom":"^6.4.8","@testing-library/react":"^16.0.0","@types/jest":"^29.5.12","eslint":"^9.9.0","eslint-config-prettier":"^9.1.0","eslint-plugin-react":"^7.35.0","globals":"^15.9.0","husky":"^9.1.4","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","lint-staged":"^15.2.9","parcel":"^2.12.0","prettier":"^3.3.3","ts-jest":"^29.2.4","typescript":"^5.5.4","typescript-eslint":"^8.1.0"},"lint-staged":{"src/**/*.ts":["npm run format","npm run lint"],"src/**/*.tsx":["npm run format","npm run lint"]},"_id":"@burzomir/color-mode-detector-react@2.0.1","gitHead":"c714348cf9d74608edad0b9549aa6e0725674c1e","homepage":"https://github.com/burzomir/color-mode-detector-react#readme","_nodeVersion":"22.5.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-uV95eaJaV170K25rMIx1+6nQ0RhNKrwmZ6RRigzOG/bjVysnFBC2IbM9vuEGl9pUeWppxRiL4FgD9kwAw2pApw==","shasum":"460a514d690c061a72beb940d8baa059bbfefd2e","tarball":"https://registry.npmjs.org/@burzomir/color-mode-detector-react/-/color-mode-detector-react-2.0.1.tgz","fileCount":12,"unpackedSize":14844,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZLOgO/hRHNVwJgp0TR4IPlBhXy0692XDrZL9rjDRkYgIhAMjE/oAPcTEmqHkjbiOW2covn6zB/C/xn7W68vy0aeH4"}]},"_npmUser":{"name":"burzomir","email":"burzomirdev@gmail.com"},"directories":{},"maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-mode-detector-react_2.0.1_1724159707753_0.5323420960145095"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-20T10:03:19.062Z","modified":"2024-08-20T13:15:08.192Z","1.0.0":"2024-08-20T10:03:19.457Z","1.0.1":"2024-08-20T13:05:15.841Z","2.0.0":"2024-08-20T13:06:41.401Z","2.0.1":"2024-08-20T13:15:07.985Z"},"license":"MIT","keywords":["color-mode","color-scheme","dark-mode","light-mode","theme","color-theme","theme-detector","dark-theme","light-theme","color-mode-detection","color-scheme-detection","responsive-design","javascript","typescript","web-development","frontend","UI","user-preferences","custom-themes","css","web-apps","react"],"description":"A lightweight React library for detecting and managing color modes (light/dark) in web applications. Simple to use, with an intuitive API for subscribing to color mode changes and customizing user interfaces accordingly.","maintainers":[{"name":"burzomir","email":"burzomirdev@gmail.com"}],"readme":"# React Color Mode Detector Hook\n\nWelcome to **React Color Mode Detector Hook** – a simple and effective React wrapper around the core **Color Mode Detector** library. This hook provides a seamless way to integrate color mode detection and management into your React applications, enabling you to easily respond to light and dark mode changes.\n\n## Requirements\n\n`\"react\": \"^18.0.0\"`\n\nFor `\"react\": \">= 16.8.0 < 18.0.0\"` check `@burzomir/color-mode-detector-react@1.0.0`\n\n## Installation\n\nInstall the package via npm or yarn:\n\n```bash\nnpm install @burzomir/color-mode-detector-react\n```\n\n## Getting Started\n\n### Step 1: Import the Hook\n\nTo get started, import the `useColorModeDetector` hook from the library:\n\n```typescript\nimport { useColorModeDetector } from \"@burzomir/color-mode-detector-react\";\n```\n\n### Step 2: Use the Hook in Your Component\n\nUse the `useColorModeDetector` hook inside your React components to detect and respond to color mode changes. You can optionally pass a default color mode (`ColorMode.Light` or `ColorMode.Dark`):\n\n```typescript\nimport React from \"react\";\nimport { useColorModeDetector, ColorMode } from \"@burzomir/color-mode-detector-react\";\n\nconst App = () => {\n  const colorMode = useColorModeDetector();\n\n  return (\n    <div\n      style={{\n        backgroundColor: colorMode === ColorMode.Dark ? \"#333\" : \"#FFF\",\n        color: colorMode === ColorMode.Dark ? \"#FFF\" : \"#000\",\n        height: \"100vh\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <h1>{`The current color mode is ${colorMode}`}</h1>\n    </div>\n  );\n};\n\nexport default App;\n```\n\n## Contributing\n\nIf you encounter any issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the [GitHub repository](https://github.com/burzomir/color-mode-detector-react).\n\nThis hook is designed to be lightweight and easy to use, just like the core **Color Mode Detector** library. If you're building a React application and need reliable color mode management, give it a try.\n","readmeFilename":"README.md","homepage":"https://github.com/burzomir/color-mode-detector-react#readme","repository":{"type":"git","url":"git+https://github.com/burzomir/color-mode-detector-react.git"},"author":{"name":"Michał Kłobukowski"},"bugs":{"url":"https://github.com/burzomir/color-mode-detector-react/issues"}}