{"_id":"tw-screens","_rev":"7-a24ec935f6c67076e2b008834da350df","name":"tw-screens","dist-tags":{"latest":"1.1.3"},"versions":{"1.0.0":{"name":"tw-screens","version":"1.0.0","keywords":["react","tailwindcss","breakpoints","hooks","responsive","media-query","typescript","pnpm","npm","nextjs","design-system"],"author":{"name":"Hakim Saoudi"},"license":"MIT","_id":"tw-screens@1.0.0","maintainers":[{"name":"h-saoudi","email":"saoudihakim@gmail.com"}],"homepage":"https://github.com/saoudi-h/tw-screens#readme","bugs":{"url":"https://github.com/saoudi-h/tw-screens/issues"},"dist":{"shasum":"c3f5fb8effad1e288d50ec83620dc7e463004e47","tarball":"https://registry.npmjs.org/tw-screens/-/tw-screens-1.0.0.tgz","fileCount":9,"integrity":"sha512-WmmAD8Y/CTereS9U3FFrxXKCHQAZ8C91sORtqC0qWIWYFSh0XHBq/JyTZHZk6YhS5MWZAfaazRe42RioFzNHIw==","signatures":[{"sig":"MEUCIQD8mjAUZkrnDDN2hjoPMaKpylZrAMQ3E9S2NQ/ZKcgloQIgMKBjWoUTfuThzFokODIhxD5JQJ0j+mcZL98qxH9h5FQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":97674},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","engines":{"node":">=16"},"exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"beb49ecf8b96b3ae6a4ed6f7d2670645273ac3d6","scripts":{"doc":"typedoc","lint":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","test":"vitest","build":"tsup","clean":"del-cli node_modules dist","format":"prettier --write \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","prepare":"pnpm build && pnpm husky","release":"semantic-release","test:ui":"vitest --ui","lint:fix":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\" --fix","test:coverage":"vitest --coverage","prepublishOnly":"pnpm run test && pnpm run lint"},"_npmUser":{"name":"h-saoudi","email":"saoudihakim@gmail.com"},"repository":{"url":"git+https://github.com/saoudi-h/tw-screens.git","type":"git"},"_npmVersion":"10.1.0","description":"React hooks for using Tailwind CSS breakpoints easily and efficiently.","directories":{},"lint-staged":{"*.{ts,tsx,js,jsx}":["prettier --write  --ignore-unknown"]},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.4","husky":"^9.1.6","jsdom":"^25.0.1","react":"18.3.1","eslint":"^9.13.0","vitest":"^2.1.3","del-cli":"^6.0.0","globals":"^15.11.0","typedoc":"^0.26.10","prettier":"3.3.3","react-dom":"^18.3.1","@eslint/js":"^9.13.0","@vitest/ui":"^2.1.3","typescript":"^5.0.0","lint-staged":"^15.2.10","tailwindcss":"^3.2.0","@types/react":"^18.2.0","semantic-release":"^24.2.0","typescript-eslint":"^8.11.0","@vitest/coverage-v8":"2.1.3","eslint-plugin-react":"^7.37.2","@semantic-release/git":"^10.0.1","@semantic-release/npm":"^12.0.1","@testing-library/react":"^16.0.1","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","typedoc-plugin-markdown":"^4.2.9","@semantic-release/github":"^11.0.0","@testing-library/jest-dom":"^6.6.2","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^13.0.0","@semantic-release/release-notes-generator":"^14.0.1","conventional-changelog-conventionalcommits":"^8.0.0"},"peerDependencies":{"react":"^18"},"_npmOperationalInternal":{"tmp":"tmp/tw-screens_1.0.0_1730040254740_0.47477138051403434","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"tw-screens","version":"1.0.1","keywords":["react","tailwindcss","breakpoints","hooks","responsive","media-query","typescript","pnpm","npm","nextjs","design-system"],"author":{"url":"https://hakimsaoudi.dev","name":"Saoudi Hakim","email":"saoudihakim@gmail.com"},"license":"MIT","_id":"tw-screens@1.0.1","maintainers":[{"name":"h-saoudi","email":"saoudihakim@gmail.com"}],"homepage":"https://github.com/saoudi-h/tw-screens#readme","bugs":{"url":"https://github.com/saoudi-h/tw-screens/issues"},"dist":{"shasum":"48b79b97dadb543063fa05fb64bb0337f365f73f","tarball":"https://registry.npmjs.org/tw-screens/-/tw-screens-1.0.1.tgz","fileCount":7,"integrity":"sha512-hZ3oe4odxtiU+LS7HNDBOAlG+YnE1nGyGNbAMGoHUpqE4OJwm4CstbYFYv9xwDSX/O+V86C7pmOY00XT35rLVQ==","signatures":[{"sig":"MEUCIGJCOvVqVxcbn0Lf04CIbMJp6rIToTrTF6/g/viwvW/1AiEAn9huqfcRX3BL1CfF/+bdHRbJ3HKsD/waY4WykPCKUrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38171},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","engines":{"node":">=16"},"exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"dc28b88749ea3e7b3330adaa4ace5ac6c60ea1d0","scripts":{"doc":"typedoc","lint":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","test":"vitest","build":"tsup --tsconfig tsconfig.build.json","clean":"del-cli node_modules dist","format":"prettier --write \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","prepare":"pnpm build && pnpm husky","release":"semantic-release","test:ui":"vitest --ui","lint:fix":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\" --fix","test:coverage":"vitest --coverage","prepublishOnly":"pnpm run test && pnpm run lint"},"_npmUser":{"name":"h-saoudi","email":"saoudihakim@gmail.com"},"repository":{"url":"git+https://github.com/saoudi-h/tw-screens.git","type":"git"},"_npmVersion":"10.1.0","description":"React hooks for using Tailwind CSS breakpoints easily and efficiently.","directories":{},"lint-staged":{"*.{ts,tsx,js,jsx}":["prettier --write  --ignore-unknown"]},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.4","husky":"^9.1.7","jsdom":"^25.0.1","react":"18.3.1","eslint":"^9.16.0","vitest":"^2.1.6","del-cli":"^6.0.0","globals":"^15.13.0","typedoc":"^0.27.2","prettier":"3.4.1","react-dom":"^18.3.1","@eslint/js":"^9.16.0","@vitest/ui":"^2.1.6","typescript":"^5.7.2","lint-staged":"^15.2.10","tailwindcss":"^3.4.15","@types/react":"^18.2.0","semantic-release":"^24.2.0","typescript-eslint":"^8.16.0","@vitest/coverage-v8":"2.1.6","eslint-plugin-react":"^7.37.2","@semantic-release/git":"^10.0.1","@semantic-release/npm":"^12.0.1","@testing-library/react":"^16.0.1","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","typedoc-plugin-markdown":"^4.3.1","@semantic-release/github":"^11.0.1","@testing-library/jest-dom":"^6.6.2","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^13.0.0","@semantic-release/release-notes-generator":"^14.0.1","conventional-changelog-conventionalcommits":"^8.0.0"},"peerDependencies":{"react":"^18"},"_npmOperationalInternal":{"tmp":"tmp/tw-screens_1.0.1_1733099600795_0.32237707607729105","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"tw-screens","version":"1.0.2","keywords":["react","tailwindcss","breakpoints","hooks","responsive","media-query","typescript","pnpm","npm","nextjs","design-system"],"author":{"url":"https://hakimsaoudi.dev","name":"Saoudi Hakim","email":"saoudihakim@gmail.com"},"license":"MIT","_id":"tw-screens@1.0.2","maintainers":[{"name":"h-saoudi","email":"saoudihakim@gmail.com"}],"homepage":"https://github.com/saoudi-h/tw-screens#readme","bugs":{"url":"https://github.com/saoudi-h/tw-screens/issues"},"dist":{"shasum":"ae5ffd1c519bd9bb502e38339e9a648b14ba9c2e","tarball":"https://registry.npmjs.org/tw-screens/-/tw-screens-1.0.2.tgz","fileCount":7,"integrity":"sha512-4IWXD/oBDw0AsVwlLqQI3h6LLpO8kyrwAm8oo9DRGlRvtJjRsx9lvNwLMj2u7SkLiKGWwAXHulalrxJ4YgqVWQ==","signatures":[{"sig":"MEUCICiPn53n5jYXaaLrSr5L7iYWjywI6dN4tUmgjh8JssTmAiEAznK0Jv1gB6Rncwrn73CHq51qYPAKRpy6hG9VI/0ApPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38171},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","engines":{"node":">=16"},"exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"b2dba0f7ed5d915cbf68fc139526ed8097095f74","scripts":{"doc":"typedoc","lint":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","test":"vitest","build":"tsup --tsconfig tsconfig.build.json","clean":"del-cli node_modules dist","format":"prettier --write \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","prepare":"pnpm build && pnpm husky","release":"semantic-release","test:ui":"vitest --ui","lint:fix":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\" --fix","test:coverage":"vitest --coverage","prepublishOnly":"pnpm run test && pnpm run lint"},"_npmUser":{"name":"h-saoudi","email":"saoudihakim@gmail.com"},"repository":{"url":"git+https://github.com/saoudi-h/tw-screens.git","type":"git"},"_npmVersion":"10.1.0","description":"React hooks for using Tailwind CSS breakpoints easily and efficiently.","directories":{},"lint-staged":{"*.{ts,tsx,js,jsx}":["prettier --write  --ignore-unknown"]},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.4","husky":"^9.1.7","jsdom":"^25.0.1","react":"18.3.1","eslint":"^9.16.0","vitest":"^2.1.6","del-cli":"^6.0.0","globals":"^15.13.0","typedoc":"^0.27.2","prettier":"3.4.2","react-dom":"^18.3.1","@eslint/js":"^9.16.0","@vitest/ui":"^2.1.6","typescript":"^5.7.2","lint-staged":"^15.2.10","tailwindcss":"^3.4.15","@types/react":"^18.2.0","semantic-release":"^24.2.0","typescript-eslint":"^8.16.0","@vitest/coverage-v8":"2.1.8","eslint-plugin-react":"^7.37.2","@semantic-release/git":"^10.0.1","@semantic-release/npm":"^12.0.1","@testing-library/react":"^16.0.1","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","typedoc-plugin-markdown":"^4.3.1","@semantic-release/github":"^11.0.1","@testing-library/jest-dom":"^6.6.2","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^13.0.0","@semantic-release/release-notes-generator":"^14.0.1","conventional-changelog-conventionalcommits":"^8.0.0"},"peerDependencies":{"react":"^18"},"_npmOperationalInternal":{"tmp":"tmp/tw-screens_1.0.2_1733356188052_0.7361436149150238","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"tw-screens","version":"1.1.0","keywords":["react","tailwindcss","breakpoints","hooks","responsive","media-query","typescript","pnpm","npm","nextjs","design-system"],"author":{"url":"https://hakimsaoudi.dev","name":"Saoudi Hakim","email":"saoudihakim@gmail.com"},"license":"MIT","_id":"tw-screens@1.1.0","maintainers":[{"name":"h-saoudi","email":"saoudihakim@gmail.com"}],"homepage":"https://github.com/saoudi-h/tw-screens#readme","bugs":{"url":"https://github.com/saoudi-h/tw-screens/issues"},"dist":{"shasum":"198060c21d849bb3d804efe52636803bbedd7d22","tarball":"https://registry.npmjs.org/tw-screens/-/tw-screens-1.1.0.tgz","fileCount":7,"integrity":"sha512-1vuBFvjcPqXRWMwllUuPEbHtOio+TPRWukEHV7MWXh0UGP2qSex8u/qkhWmwcmP9cyehFPOLdOiKGRsP/X/sFQ==","signatures":[{"sig":"MEUCIHKI3xD9AOHf9Q3f96hFp8TDazf26q9x0GxF7l3YKjzkAiEA98s/2RUzP/B08bnlMU0fanFairjhYRFKlxQ9nw4LeBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":38205},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","engines":{"node":">=16"},"exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"9a934a4e1b2042536ec298b6a77a4d6491590f86","scripts":{"doc":"typedoc","lint":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","test":"vitest","build":"tsup --tsconfig tsconfig.build.json","clean":"del-cli node_modules dist","format":"prettier --write \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\"","prepare":"pnpm build && pnpm husky","release":"semantic-release","test:ui":"vitest --ui","lint:fix":"eslint \"{src,__tests__}/**/*.{ts,tsx,md,js,jsx}\" --fix","typecheck":"tsc --noEmit","test:coverage":"vitest --coverage","prepublishOnly":"pnpm run test && pnpm run lint"},"_npmUser":{"name":"h-saoudi","email":"saoudihakim@gmail.com"},"repository":{"url":"git+https://github.com/saoudi-h/tw-screens.git","type":"git"},"_npmVersion":"10.1.0","description":"React hooks for using Tailwind CSS breakpoints easily and efficiently.","directories":{},"lint-staged":{"*.{ts,tsx,js,jsx}":["prettier --write  --ignore-unknown"]},"sideEffects":false,"_nodeVersion":"20.9.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.4","husky":"^9.1.7","jsdom":"^25.0.1","react":"19.0.0","eslint":"^9.17.0","vitest":"^2.1.8","del-cli":"^6.0.0","globals":"^15.14.0","typedoc":"^0.27.5","prettier":"3.4.2","react-dom":"^19.0.0","@eslint/js":"^9.17.0","@vitest/ui":"^2.1.8","typescript":"^5.7.2","lint-staged":"^15.2.11","tailwindcss":"^3.4.15","@types/react":"^19.0.2","semantic-release":"^24.2.0","typescript-eslint":"^8.18.1","@vitest/coverage-v8":"2.1.8","eslint-plugin-react":"^7.37.2","@semantic-release/git":"^10.0.1","@semantic-release/npm":"^12.0.1","@testing-library/react":"^16.1.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","typedoc-plugin-markdown":"^4.3.3","@semantic-release/github":"^11.0.1","@testing-library/jest-dom":"^6.6.2","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^13.0.0","@semantic-release/release-notes-generator":"^14.0.2","conventional-changelog-conventionalcommits":"^8.0.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/tw-screens_1.1.0_1734791190513_0.9723612189975677","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"tw-screens","version":"1.1.2","keywords":["react","tailwindcss","breakpoints","hooks","responsive","media-query","typescript","pnpm","npm","nextjs","design-system"],"author":{"url":"https://hakimsaoudi.dev","name":"Saoudi Hakim","email":"saoudihakim@gmail.com"},"license":"MIT","_id":"tw-screens@1.1.2","maintainers":[{"name":"h-saoudi","email":"saoudihakim@gmail.com"}],"homepage":"https://github.com/saoudi-h/tw-screens#readme","bugs":{"url":"https://github.com/saoudi-h/tw-screens/issues"},"dist":{"shasum":"bff790d4cd2dc132a90e573f54c94b3f0643ef1a","tarball":"https://registry.npmjs.org/tw-screens/-/tw-screens-1.1.2.tgz","fileCount":7,"integrity":"sha512-bcgjNBaJuo6/swvyUj4cqX/UalvmGlQqSpvvsNJsKIXg9zPO8tss3x5bxsjWAxdBR2v1sK+Of0pmmckd31fzkQ==","signatures":[{"sig":"MEYCIQCOs4V3BwsGuGDCYiCrfB51mzDWUJibfFdhEGM4Ed3KMgIhAORgFxl9DmgxTlITocmrV3fdhW4RXlFlxfU9qh5CLkzJ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38559},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","engines":{"node":">=16"},"exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"94693b310363f9f82ca4f8ae3fe564a576bda3c2","scripts":{"doc":"typedoc","lint":"eslint .","test":"vitest","build":"tsup --tsconfig tsconfig.build.json","clean":"del-cli node_modules dist","format":"prettier --write .","prepare":"pnpm build && pnpm husky","release":"semantic-release","test:ui":"vitest --ui","lint:fix":"eslint . --fix","typecheck":"tsc --noEmit","test:coverage":"vitest --coverage","prepublishOnly":"pnpm run test && pnpm run lint"},"_npmUser":{"name":"h-saoudi","email":"saoudihakim@gmail.com"},"repository":{"url":"git+https://github.com/saoudi-h/tw-screens.git","type":"git"},"_npmVersion":"10.9.2","description":"React hooks for using Tailwind CSS breakpoints easily and efficiently.","directories":{},"lint-staged":{"*.{ts,tsx,js,jsx}":["prettier --write  --ignore-unknown"]},"sideEffects":false,"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"packageManager":"pnpm@10.13.1","devDependencies":{"tsup":"^8.5.0","husky":"^9.1.7","jsdom":"^26.1.0","react":"^19.1.0","eslint":"^9.32.0","vitest":"^3.2.4","del-cli":"^6.0.0","globals":"^16.3.0","typedoc":"^0.28.7","prettier":"3.6.2","react-dom":"^19.1.0","@eslint/js":"^9.32.0","@vitest/ui":"^3.2.4","typescript":"^5.8.3","lint-staged":"^16.1.2","tailwindcss":"^4.1.11","@types/react":"^19.1.8","semantic-release":"^24.2.7","typescript-eslint":"^8.38.0","@vitest/coverage-v8":"3.2.4","eslint-plugin-react":"^7.37.5","@semantic-release/git":"^10.0.1","@semantic-release/npm":"^12.0.2","@testing-library/react":"^16.3.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.3","typedoc-plugin-markdown":"^4.7.1","@semantic-release/github":"^11.0.3","@testing-library/jest-dom":"^6.6.4","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^13.0.1","@semantic-release/release-notes-generator":"^14.0.3","conventional-changelog-conventionalcommits":"^9.1.0"},"peerDependencies":{"react":">=18"},"_npmOperationalInternal":{"tmp":"tmp/tw-screens_1.1.2_1753590658965_0.8268559483041331","host":"s3://npm-registry-packages-npm-production"}},"1.1.3":{"name":"tw-screens","version":"1.1.3","description":"React hooks for using Tailwind CSS breakpoints easily and efficiently.","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.mts","sideEffects":false,"type":"module","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"build":"tsdown","format":"prettier --write .","lint":"eslint .","lint:fix":"eslint . --fix","clean":"del-cli node_modules dist","prepare":"pnpm build && pnpm husky","prepublishOnly":"pnpm run test && pnpm run lint","release":"semantic-release","test":"vitest run","test:watch":"vitest","test:ui":"vitest --ui","test:coverage":"vitest --coverage","typecheck":"tsc --noEmit","doc":"typedoc","autonomos":"autonomos"},"repository":{"type":"git","url":"git+https://github.com/saoudi-h/tw-screens.git"},"keywords":["react","tailwindcss","breakpoints","hooks","responsive","media-query","typescript","pnpm","npm","nextjs","design-system"],"author":{"name":"Saoudi Hakim","email":"saoudihakim@gmail.com","url":"https://hakimsaoudi.dev"},"license":"MIT","bugs":{"url":"https://github.com/saoudi-h/tw-screens/issues"},"engines":{"node":">=16"},"homepage":"https://github.com/saoudi-h/tw-screens#readme","devDependencies":{"@autonomos/cli":"^0.3.3","@semantic-release/changelog":"^6.0.3","@semantic-release/commit-analyzer":"^13.0.1","@semantic-release/git":"^10.0.1","@semantic-release/github":"^12.0.9","@semantic-release/npm":"^13.1.5","@semantic-release/release-notes-generator":"^14.0.3","@tala-tools/eslint":"^0.1.5","@tala-tools/prettier":"^0.0.3","@tala-tools/tsconfig":"^0.0.2","@tala-tools/tsdown":"^0.1.5","@testing-library/jest-dom":"^6.6.4","@testing-library/react":"^16.3.0","@types/react":"^19.1.9","@vitest/coverage-v8":"4.1.10","@vitest/ui":"^4.1.10","conventional-changelog-conventionalcommits":"^10.2.1","del-cli":"^7.0.0","eslint":"^10.7.0","globals":"^17.7.0","husky":"^9.1.7","jsdom":"^29.1.1","lint-staged":"^17.0.0","prettier":"3.9.5","react":"^19.1.1","react-dom":"^19.1.1","semantic-release":"^25.0.8","tailwindcss":"^4.1.11","tsdown":"^0.22.9","typedoc":"^0.28.10","typedoc-plugin-markdown":"^4.8.0","typescript":"^6.0.0","vitest":"^4.1.10"},"peerDependencies":{"react":">=18"},"lint-staged":{"*.{ts,tsx,js,jsx}":["prettier --write  --ignore-unknown"]},"packageManager":"pnpm@11.15.0","gitHead":"12531900096d1f9571a3fa24506cd43e6db01a17","_id":"tw-screens@1.1.3","_nodeVersion":"26.5.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-uvqrL4wtLf/3jbYD30Ekk5kSoPZW6JzxF6lCEPDnQREwczjtDNQJ2eMcRqZacSCINmcskIf58/CjKP/mZc+snw==","shasum":"6260ae9bd3ac0d3820d35b839e396b72abe6a5d7","tarball":"https://registry.npmjs.org/tw-screens/-/tw-screens-1.1.3.tgz","fileCount":10,"unpackedSize":70193,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD25ayy7DY754JBfTWqLQEvm+NYyTDJs1rWGiqTyMdJHwIgHLiO41FUhbFerWGVjPaBCguOIdqzDjrlF5+/HJtT2QI="}]},"_npmUser":{"name":"h-saoudi","email":"saoudihakim@gmail.com"},"directories":{},"maintainers":[{"name":"h-saoudi","email":"saoudihakim@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tw-screens_1.1.3_1784465970517_0.08342266061940373"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-27T14:44:14.739Z","modified":"2026-07-19T12:59:30.812Z","1.0.0":"2024-10-27T14:44:14.952Z","1.0.1":"2024-12-02T00:33:21.003Z","1.0.2":"2024-12-04T23:49:48.220Z","1.1.0":"2024-12-21T14:26:30.709Z","1.1.2":"2025-07-27T04:30:59.151Z","1.1.3":"2026-07-19T12:59:30.649Z"},"bugs":{"url":"https://github.com/saoudi-h/tw-screens/issues"},"author":{"name":"Saoudi Hakim","email":"saoudihakim@gmail.com","url":"https://hakimsaoudi.dev"},"license":"MIT","homepage":"https://github.com/saoudi-h/tw-screens#readme","keywords":["react","tailwindcss","breakpoints","hooks","responsive","media-query","typescript","pnpm","npm","nextjs","design-system"],"repository":{"type":"git","url":"git+https://github.com/saoudi-h/tw-screens.git"},"description":"React hooks for using Tailwind CSS breakpoints easily and efficiently.","maintainers":[{"name":"h-saoudi","email":"saoudihakim@gmail.com"}],"readme":"**tw-screens** • [**Docs**](./docs/README.md)\n\n---\n\n# tw-screens\n\n**`tw-screens`** is a lightweight TypeScript library for managing responsive breakpoints dynamically. Inspired by Tailwind CSS, `tw-screens` lets you define custom breakpoints and use hooks to handle UI responsiveness, all while staying compatible with Tailwind's screen configuration.\n\n- **Size**: 4.19 KB (compressed)\n- **Type-safe**: Full TypeScript support for optimal DX\n- **Coverage**: 90%+ test coverage\n- **Compatibility**: Tailwind CSS breakpoint API\n- **Performance**: Optimized BreakpointManager for minimal overhead\n- **Zero Dependencies**: Minimal footprint\n\n---\n\n## Features\n\n- **Dynamic Breakpoints**: Customizable breakpoints on the fly.\n- **Tailwind Compatible**: Same screen API for easy integration.\n- **Responsive Hooks**: Includes `useScreen`, `useScreenReverse`, `useScreenValue`, and `useScreenEffect`.\n- **Optimized Performance**: Efficient management via BreakpointManager without requiring a provider.\n- **Lightweight**: 4.19 KB size keeps your bundle small.\n- **SSR Compatible**: Works seamlessly with server-side rendering.\n\n---\n\n## Installation\n\nInstall `tw-screens` via npm, yarn or pnpm:\n\n```sh\nnpm install tw-screens\n```\n\nor\n\n```sh\nyarn add tw-screens\n```\n\nor\n\n```sh\npnpm add tw-screens\n```\n\n---\n\n## Getting Started\n\n`tw-screens` is flexible for defining breakpoints and using them in your components.\n\n### Step-by-Step Example: Tailwind CSS Breakpoints\n\nEasily integrate `tw-screens` with your Tailwind CSS configuration.\n\n1. **Define Screens Configuration**\n\nDefine screens similar to Tailwind CSS using `min`, `max`, or `raw`.\n\n```typescript\n// screens.ts\nexport const screens = {\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n    custom: { min: '600px', max: '900px' },\n    wide: { raw: '(min-width: 1600px)' },\n} as const\n```\n\n2. **Create Hooks Using `tw-screens`**\n\nUse the `create` function to generate hooks for managing breakpoints.\n\n```typescript\n// hooks.ts\nimport { create } from 'tw-screens'\nimport { screens } from './screens'\n\nexport const { useScreen, useScreenReverse, useScreenValue, useScreenEffect } = create(screens)\n```\n\n3. **Integrate with Tailwind CSS**\n\nAdd your screens to Tailwind to sync breakpoints.\n\n```typescript\n// tailwind.config.js\nconst { screens } = require('./screens')\n\nmodule.exports = {\n    theme: {\n        screens: {\n            ...screens,\n        },\n    },\n}\n```\n\n4. **Use Hooks in Components**\n\nUse the generated hooks in your components.\n\n```typescript\n// ExampleComponent.tsx\nimport React from \"react\";\nimport { useScreen } from \"./hooks\";\n\nconst ExampleComponent = () => {\n  const isDesktop = useScreen(\"md\");\n\n  return <div>{isDesktop ? \"Desktop View\" : \"Mobile View\"}</div>;\n};\n\nexport default ExampleComponent;\n```\n\n### Raw CSS Breakpoints for Flexibility\n\nDefine custom breakpoints directly using CSS media queries.\n\n```typescript\nimport { useBreakpoint } from 'tw-screens/hooks';\n\nfunction CustomRawBreakpointComponent() {\n  const isWideScreen = useBreakpoint({ raw: \"screen and (min-width: 1400px)\" });\n\n  return <div>{isWideScreen ? \"Wide Screen View\" : \"Regular View\"}</div>;\n}\n```\n\n### Two Ways to Use `tw-screens`\n\n1. **With Tailwind Screens**: Define breakpoints with Tailwind and sync them:\n\n    ```typescript\n    theme: {\n      screens: {\n        ...screens\n      }\n    }\n    ```\n\n    Default Tailwind configuration users can create hooks without a custom object:\n\n    ```typescript\n    import { create } from 'tw-screens'\n    export const { useScreen, useScreenReverse, useScreenValue, useScreenEffect } = create()\n    ```\n\n2. **Ad-hoc Breakpoints with `useBreakpoint`**: Use for one-off breakpoints:\n\n    ```typescript\n    import { useBreakpoint } from 'tw-screens/hooks';\n\n    const ExampleComponent = () => {\n      const isMediumScreen = useBreakpoint(\"850px\");\n      return <div>{isMediumScreen ? \"Medium Screen\" : \"Other Screen\"}</div>;\n    };\n    ```\n\n---\n\n## API Documentation\n\n- **`create(screens: ScreensConfig)`**\n    - Generates hooks like `useScreen`, `useScreenReverse`, and others for custom breakpoints.\n\n- **`useBreakpoint(breakpoint: ScreenValue, options?: UseBreakpointOptions): boolean`**\n    - **breakpoint**: A string or object (`{ min: '640px', max: '1024px' }`).\n\n- **`useBreakpointReverse(breakpoint: ScreenValue): boolean`**\n    - Provides the opposite of `useBreakpoint`.\n\nFor more details, check the [documentation](./docs).\n\n---\n\n## Tailwind v4 & Best Practices\n\nWith the release of Tailwind v4, configuration has moved from `tailwind.config.js` to pure CSS using the `@theme` directive. Because `tw-screens` historically relied on sharing the JavaScript configuration object, here is the recommended approach moving forward:\n\n1. **CSS First**: Always prefer using Tailwind's native responsive utility classes (e.g., `hidden md:block`) instead of JavaScript hooks when possible. CSS is faster, doesn't trigger React re-renders, and avoids Server-Side Rendering (SSR) flashes of unstyled content (FOUC).\n2. **When to use `tw-screens`**: Use these hooks *only* when your application requires conditional rendering of heavy components or logic changes across breakpoints (e.g., rendering a complex `Drawer` component on mobile instead of a `Sidebar`).\n3. **Using with v4**: You can still use `tw-screens` in a Tailwind v4 project by defining your custom logic breakpoints directly via `create()` or `useBreakpoint()`, keeping your logical breakpoints separate from your purely visual CSS breakpoints.\n\n---\n\n## Problem Solved\n\n`tw-screens` simplifies responsive UIs in React, supporting custom breakpoints and easy Tailwind integration while ensuring type safety and performance.\n\n- **Type Safety**: Reliable, type-checked breakpoints.\n- **Tailwind Integration**: Share breakpoints with Tailwind without loading the full config.\n- **Performance**: Efficient breakpoint management without providers.\n- **SSR Compatible**: Works smoothly with server-side rendering.\n- **No Dependencies**: Lightweight and conflict-free.\n\n---\n\n## Contributing\n\nWe welcome contributions to improve `tw-screens`. Feel free to open issues, suggest features, or contribute code!\n\n---\n\n## License\n\n`tw-screens` is MIT licensed.\n\n---\n\nFor full documentation, please check our [documentation](./docs/README.md) folder.\n","readmeFilename":"README.md","users":{"h-saoudi":true}}