{"_id":"@openstatus/react","_rev":"4-2b63b1fe21ed27e6caf0604ddcc371f7","name":"@openstatus/react","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.0":{"name":"@openstatus/react","version":"0.0.0","main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","license":"MIT","scripts":{"build:tailwind":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify","build":"tsup && pnpm run build:tailwind"},"devDependencies":{"@openstatus/tsconfig":"workspace:*","@types/node":"20.8.0","@types/react":"18.2.24","tailwindcss":"3.3.2","tsup":"7.2.0","typescript":"5.2.2"},"gitHead":"61ab3aa53251866eb1a679e25084616e8c37d19d","_id":"@openstatus/react@0.0.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-byAAfmV6Upc5gikkh4gIFUAVaCK3AGXugtZqSeH9SYpMfu42wQuu/02l/+s5RR56TqW9jpKeNrKE7XMOGZngtA==","shasum":"d23a46e0fd1031422e2e36363d7e3616303550cd","tarball":"https://registry.npmjs.org/@openstatus/react/-/react-0.0.0.tgz","fileCount":8,"unpackedSize":677501,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWYFcoTRe41v7C1YehxKu88o6Qooc2Aa5G/VB1BSdAqAIhANh8VpkE9xlplj27FPBI2RgRbs6isJfeJkgXcJWjkLOa"}]},"_npmUser":{"name":"maximiliankaske","email":"maximilian@kaske.org"},"directories":{},"maintainers":[{"name":"maximiliankaske","email":"maximilian@kaske.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0_1696958097713_0.9647902443039078"},"_hasShrinkwrap":false},"0.0.1":{"name":"@openstatus/react","version":"0.0.1","main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","license":"MIT","scripts":{"build:tailwind":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify","build":"tsup && pnpm run build:tailwind"},"devDependencies":{"@openstatus/tsconfig":"workspace:*","@types/node":"20.8.0","@types/react":"18.2.24","tailwindcss":"3.3.2","tsup":"7.2.0","typescript":"5.2.2"},"peerDependencies":{"react":"^18.0.0"},"gitHead":"493419f7b8d1e512ea19469a3bb082bb9642ac99","description":"### Install","_id":"@openstatus/react@0.0.1","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-eaobHyUpHfttHpy2TY06Bwc2CMONylzm9VTwFSWrMsE3O0oL/HUYQj9t0jIQtL78Ecw0dD2fyL/nJ369mWpAag==","shasum":"ba427c4ed3ad2cef1131438cc74882d8c4fecdbb","tarball":"https://registry.npmjs.org/@openstatus/react/-/react-0.0.1.tgz","fileCount":9,"unpackedSize":20018,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFqLnDiZwVRpO1YqEmY0cECCqJRJp65ns2WS5CsYAERAIhALzTfZu9yTE3cxdY4oA44khw1CqruiEX/GmlA7MBKnUl"}]},"_npmUser":{"name":"maximiliankaske","email":"maximilian@kaske.org"},"directories":{},"maintainers":[{"name":"maximiliankaske","email":"maximilian@kaske.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.1_1697041856453_0.2420975911338572"},"_hasShrinkwrap":false},"0.0.2":{"name":"@openstatus/react","version":"0.0.2","repository":{"type":"git","url":"git+https://github.com/openstatusHQ/openstatus.git"},"keywords":["openstatus","react","monitoring"],"homepage":"https://github.com/openstatusHQ/openstatus#readme","main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","license":"MIT","scripts":{"dev":"tsup --watch && pnpm run dev:tailwind","dev:tailwind":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch","build:tailwind":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify","build":"tsup && pnpm run build:tailwind"},"devDependencies":{"@openstatus/tsconfig":"workspace:*","@types/node":"20.8.0","@types/react":"18.2.24","tailwindcss":"3.3.2","tsup":"7.2.0","typescript":"5.2.2"},"peerDependencies":{"react":"^18.0.0"},"gitHead":"285bfa191895b4472fd966815973d174fdb6e2fc","description":"Create an account on [openstatus.dev](https://openstatus.dev), start monitoring your endpoints and include your own StatusWidget into your React Application.","bugs":{"url":"https://github.com/openstatusHQ/openstatus/issues"},"_id":"@openstatus/react@0.0.2","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-RNrW1u3iD5abqy6PoegadIj3qPxW8ui0d3f+QkqjFN5oUpK98qfG9hN5kN6Q3NH+eoZ5eQTHHKHn3HCPzbsCOQ==","shasum":"9c7c9af3d5936ad228d725c871a61ee38c67f60e","tarball":"https://registry.npmjs.org/@openstatus/react/-/react-0.0.2.tgz","fileCount":8,"unpackedSize":17655,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKyHqzlREVOrwqaFQj4AAz8B3sC8e+4H7MoOaU1tro1AiA7YPGTc8e9PtboW0GhHnXdFiIiO0mUMp/Nok7W4LuzuQ=="}]},"_npmUser":{"name":"maximiliankaske","email":"maximilian@kaske.org"},"directories":{},"maintainers":[{"name":"maximiliankaske","email":"maximilian@kaske.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.2_1699389885083_0.9300161534607101"},"_hasShrinkwrap":false},"0.0.3":{"name":"@openstatus/react","version":"0.0.3","repository":{"type":"git","url":"git+https://github.com/openstatusHQ/openstatus.git"},"keywords":["openstatus","react","monitoring"],"homepage":"https://github.com/openstatusHQ/openstatus#readme","main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","license":"MIT","scripts":{"dev":"tsup --watch && pnpm run dev:tailwind","dev:tailwind":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch","build:tailwind":"tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify","build":"tsup && pnpm run build:tailwind"},"devDependencies":{"@openstatus/tsconfig":"workspace:*","@types/node":"20.8.0","@types/react":"18.2.24","tailwindcss":"3.3.2","tsup":"7.2.0","typescript":"5.2.2"},"peerDependencies":{"react":"^18.0.0"},"gitHead":"5d9cdbeadb7e96a445b8c2e70bf861375f8561be","description":"Create an account on [openstatus.dev](https://openstatus.dev), start monitoring your endpoints and include your own StatusWidget into your React Application.","bugs":{"url":"https://github.com/openstatusHQ/openstatus/issues"},"_id":"@openstatus/react@0.0.3","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-uDiegz7e3H67pG8lTT+op+6w5keTT7XpcENrREaqlWl5j53TYyO8nheOG1PeNw2/Qgd5KaGeRJJFn1crhTUSYw==","shasum":"71b639e47b597a2a645c846ab4029c2c59c1de44","tarball":"https://registry.npmjs.org/@openstatus/react/-/react-0.0.3.tgz","fileCount":9,"unpackedSize":22956,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBvFDm8pSOmzhJNePjtMpuunKXMh4qk6rpusgv3rlSgAiEAvROBZTD5I1VZBz2wlRnPWZwezgRATsGsU1+Ww1NIf24="}]},"_npmUser":{"name":"maximiliankaske","email":"maximilian@kaske.org"},"directories":{},"maintainers":[{"name":"maximiliankaske","email":"maximilian@kaske.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.3_1700837000739_0.5814877478445455"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-10T17:14:57.594Z","0.0.0":"2023-10-10T17:14:58.086Z","modified":"2024-04-22T21:54:45.215Z","0.0.1":"2023-10-11T16:30:56.625Z","0.0.2":"2023-11-07T20:44:45.268Z","0.0.3":"2023-11-24T14:43:20.918Z"},"maintainers":[{"email":"thibaultleouay@gmail.com","name":"thibaultleouay"},{"email":"maximilian@kaske.org","name":"maximiliankaske"}],"license":"MIT","readme":"# Status Widget\n\nCreate an account on [openstatus.dev](https://openstatus.dev), start monitoring\nyour endpoints and include your own StatusWidget into your React Application.\n\n\n\n## Install\n\n```bash\nnpm install @openstatus/react\npnpm add @openstatus/react\nyarn add @openstatus/react\nbun add @openstatus/react\n```\n\n## How to use the StatusWidget in your Next.js App Router\n\n### Include the styles.css\n\nIf you are using tailwind, extend your config with:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n content: [\n \"./app/**/*.{tsx,ts,mdx,md}\",\n // OpenStatus Widget\n \"./node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};\n```\n\nOtherwise, include the styles in your App:\n\n```tsx\n// app/layout.tsx\nimport \"@openstatus/react/dist/styles.css\";\n```\n\nThe `StatusWidget` is a React Server Component. Include the `slug` to your\nstatus-page.\n\n```tsx\nimport { StatusWidget } from \"@openstatus/react\";\n\nexport function Page() {\n return ;\n}\n```\n\n## Headless getStatus utility function\n\nIf you would like to style it yourself, you can use the `getStatus` function to\naccess the type response of the api call to:\n\n`https://api.openstatus.dev/public/status/:slug`\n\nLearn more about our supported\n[API endpoints](https://docs.openstatus.dev/api-reference/auth).\n\n```ts\nimport { getStatus } from \"@openstatus/react\";\n\n// React Server Component\nasync function CustomStatusWidget() {\n const res = await getStatus(\"slug\");\n // ^StatusResponse = { status: Status }\n\n const { status } = res;\n // ^Status = \"unknown\" | \"operational\" | \"degraded_performance\" | \"partial_outage\" | \"major_outage\" | \"under_maintenance\"\n\n return {/* customize */}
;\n}\n```\n\n```ts\nexport type Status =\n | \"operational\"\n | \"degraded_performance\"\n | \"partial_outage\"\n | \"major_outage\"\n | \"under_maintenance\"\n | \"unknown\"\n | \"incident\";\n```\n\nLearn more in the [docs](https://docs.openstatus.dev/packages/react).\n\n### About OpenStatus\n\nOpenStatus is an open source monitoring services with incident managements.\n\nFollow our journey [@openstatusHQ](https://x.com/openstatusHQ).\n","readmeFilename":"README.md","description":"Create an account on [openstatus.dev](https://openstatus.dev), start monitoring your endpoints and include your own StatusWidget into your React Application.","homepage":"https://github.com/openstatusHQ/openstatus#readme","keywords":["openstatus","react","monitoring"],"repository":{"type":"git","url":"git+https://github.com/openstatusHQ/openstatus.git"},"bugs":{"url":"https://github.com/openstatusHQ/openstatus/issues"}}