{"id":22015412,"url":"https://github.com/tsukinoko-kun/react-tag-cloud","last_synced_at":"2025-05-07T00:46:41.839Z","repository":{"id":103154148,"uuid":"582034726","full_name":"tsukinoko-kun/react-tag-cloud","owner":"tsukinoko-kun","description":"React component for Cong Mins TagCloud","archived":false,"fork":false,"pushed_at":"2023-08-24T11:35:19.000Z","size":81,"stargazers_count":29,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-06T04:58:02.228Z","etag":null,"topics":["component","react","react-components","tag-cloud","tags"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@frank-mayer/react-tag-cloud","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsukinoko-kun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-12-25T11:53:37.000Z","updated_at":"2025-03-28T08:37:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"c4df433c-4884-49bc-a28f-d02465be7f95","html_url":"https://github.com/tsukinoko-kun/react-tag-cloud","commit_stats":null,"previous_names":["tsukinoko-kun/react-tag-cloud","frank-mayer/react-tag-cloud"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsukinoko-kun%2Freact-tag-cloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsukinoko-kun%2Freact-tag-cloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsukinoko-kun%2Freact-tag-cloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsukinoko-kun%2Freact-tag-cloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsukinoko-kun","download_url":"https://codeload.github.com/tsukinoko-kun/react-tag-cloud/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252793568,"owners_count":21805055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","react","react-components","tag-cloud","tags"],"created_at":"2024-11-30T04:21:44.488Z","updated_at":"2025-05-07T00:46:41.816Z","avatar_url":"https://github.com/tsukinoko-kun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/cong-min/TagCloud/master/examples/tagcloud.gif\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact Tag Cloud\u003c/h1\u003e\n\nPort of [Cong Min](https://github.com/cong-min)s [TagCloud](https://github.com/cong-min/TagCloud) as a React Component\n\n[![this product is ai free](https://this-product-is-ai-free.github.io/badge.svg)](https://this-product-is-ai-free.github.io)\n\n[![Test](https://github.com/Frank-Mayer/react-tag-cloud/actions/workflows/test.yml/badge.svg)](https://github.com/Frank-Mayer/react-tag-cloud/actions/workflows/test.yml)\n\n## Installation\n\n### npm\n\n```bash\nnpm install @frank-mayer/react-tag-cloud\n```\n\n### yarn\n\n```bash\nyarn add @frank-mayer/react-tag-cloud\n```\n\n### pnpm\n\n```bash\npnpm add @frank-mayer/react-tag-cloud\n```\n\n### bun\n\n```bash\nbun add @frank-mayer/react-tag-cloud\n```\n\n## Usage\n\nSince this component is based on a non-React library, it uses the `useEffect` hook and cannot be rendered on the server.\n\nThe component can be imported as a named export or as a default export (useful for lazy loaded components).\n\nThe `options` property can modify the behaviour of the component. You can provide the options as a `object` or as a `function` that returns this `object`.\nIf you provide a `function`, the `window` object will be passed as an argument.\nThis is useful if you want to use the window size to calculate the radius of the tag cloud.\n\nPass an `Array` of `string`s as children to the component. This will be used as the tags.\n\n```tsx\nimport React from \"react\";\nimport { TagCloud } from \"@frank-mayer/react-tag-cloud\";\n// same as: import TagCloud from \"@frank-mayer/react-tag-cloud\"\n\nconst App = () =\u003e (\n    \u003cTagCloud\n        options={(w: Window \u0026 typeof globalThis): TagCloudOptions =\u003e ({\n            radius: Math.min(500, w.innerWidth, w.innerHeight) / 2,\n            maxSpeed: \"fast\",\n        })}\n        onClick={(tag: string, ev: MouseEvent) =\u003e alert(tag)}\n        onClickOptions={{ passive: true }}\n    \u003e\n        {[\n            \"VSCode\",\n            \"TypeScript\",\n            \"React\",\n            \"Preact\",\n            \"Parcel\",\n            \"Jest\",\n            \"Next\",\n            \"ESLint\",\n            \"Framer Motion\",\n            \"Three.js\",\n        ]}\n    \u003c/TagCloud\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsukinoko-kun%2Freact-tag-cloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsukinoko-kun%2Freact-tag-cloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsukinoko-kun%2Freact-tag-cloud/lists"}