{"id":23977491,"url":"https://github.com/madox2/react-tagcloud","last_synced_at":"2025-05-16T16:08:45.359Z","repository":{"id":45338105,"uuid":"47214898","full_name":"madox2/react-tagcloud","owner":"madox2","description":"Tag/word cloud component for react https://madox2.github.io/react-tagcloud/","archived":false,"fork":false,"pushed_at":"2023-10-22T12:02:47.000Z","size":8967,"stargazers_count":198,"open_issues_count":1,"forks_count":32,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-13T01:38:10.106Z","etag":null,"topics":["react","tag-cloud","word-cloud"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/madox2.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,"publiccode":null,"codemeta":null}},"created_at":"2015-12-01T20:17:24.000Z","updated_at":"2025-04-02T08:02:13.000Z","dependencies_parsed_at":"2024-06-18T13:59:40.091Z","dependency_job_id":null,"html_url":"https://github.com/madox2/react-tagcloud","commit_stats":{"total_commits":186,"total_committers":7,"mean_commits":"26.571428571428573","dds":"0.16129032258064513","last_synced_commit":"43a706b36a606ddd8a39c4060510166aebdf445e"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madox2%2Freact-tagcloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madox2%2Freact-tagcloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madox2%2Freact-tagcloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madox2%2Freact-tagcloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madox2","download_url":"https://codeload.github.com/madox2/react-tagcloud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254564127,"owners_count":22092122,"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":["react","tag-cloud","word-cloud"],"created_at":"2025-01-07T07:44:41.144Z","updated_at":"2025-05-16T16:08:45.333Z","avatar_url":"https://github.com/madox2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tagcloud\n\n![](https://github.com/madox2/react-tagcloud/workflows/Tests/badge.svg)\n\nSimple and extensible tag/word cloud React component.\n\nSee the [demo](https://madox2.github.io/react-tagcloud/).\n\n![preview tag-cloud preview](./demo-min.png)\n\n## Installation\n\n```\nnpm install react-tagcloud\n\n# or with yarn\nyarn add react-tagcloud\n\n# react \u003c 16.8.0\nnpm install react-tagcloud@1.4\n```\n\n## Basic usage\n\n```javascript\nimport { TagCloud } from 'react-tagcloud'\n\nconst data = [\n  { value: 'JavaScript', count: 38 },\n  { value: 'React', count: 30 },\n  { value: 'Nodejs', count: 28 },\n  { value: 'Express.js', count: 25 },\n  { value: 'HTML5', count: 33 },\n  { value: 'MongoDB', count: 18 },\n  { value: 'CSS3', count: 20 },\n]\n\nconst SimpleCloud = () =\u003e (\n  \u003cTagCloud\n    minSize={12}\n    maxSize={35}\n    tags={data}\n    onClick={tag =\u003e alert(`'${tag.value}' was selected!`)}\n  /\u003e\n)\n```\n\n### React Native\n\nIn react native projects import tag cloud from the package relative path `react-tagcloud/rn`.\n\n```javascript\nimport React from 'react';\n\nimport { Alert } from 'react-native';\nimport { TagCloud } from 'react-tagcloud/rn'\n\nconst data = [\n  // ...\n]\n\nconst SimpleCloud = () =\u003e (\n  \u003cTagCloud\n    minSize={12}\n    maxSize={35}\n    tags={data}\n    onPress={tag =\u003e Alert.alert(`'${tag.value}' was selected!`)}\n  /\u003e\n)\n```\n\n## API\n\n### Options\n\n`\u003cTagCloud /\u003e` component has props listed below:\n\n| Option | Type | Required | Note |\n|-----------|----------|--------|---|\n|`tags`                 |`Array`   |`true`|Array of objects that represent tags (see [Tag object](#tag-object))|\n|`maxSize`              |`Number`  |`true` |Maximal font size (in px) used in cloud|\n|`minSize`              |`Number`  |`true` |Minimal font size (in px) used in cloud|\n|`shuffle`              |`Boolean` |`false`|If true, tags are shuffled. When `tags` are modified, cloud is re-shuffled. Default: `true`|\n|`colorOptions`         |`Object`  |`false`|Random color options (see [randomColor#options](https://github.com/davidmerfield/randomColor#options))|\n|`disableRandomColor`   |`Boolean` |`false`|If `true`, random color is not used|\n|`randomSeed`           |`Number`  |`false`|Random seed used to shuffle tags and generate color|\n|`renderer`             |`Function`|`false`|Function used to render tag|\n|`randomNumberGenerator`|`Function`|`false`|DEPRECATED, use `randomSeed` instead. Specifies a custom random number generator that is being used by shuffle algorithm. Default: `Math.random`|\n\n*Note:* Furthermore you can pass any other prop and it will be forwarded to the wrapping `\u003cdiv /\u003e` component (e.g. `style`, `className`).\n\n### Tag object\n\nEach tag is represented by object literal having following properties:\n\n| Property | Type | Required | Note |\n|----------|------|----------|------|\n|`value`|`String`|`true` |String value to be displayed|\n|`count`|`Number`|`true` |Represents frequency of the tag that is used to calculate tag size|\n|`key`  |`String`|`false`|Tag element key. If it is not provided, `value` property will be used instead (however it can fail if you don't have unique tag values. It is highly recommeded to use `key` property)|\n|`color`|`String`|`false`|Represents color of the tag. If it is not provided, random color will be used instead|\n|`props`|`Object`|`false`|Props to be passed to a particular tag component|\n\n### Events\n\nEvent handlers can be passed to the `\u003cTagCloud /\u003e` props.\nEach handler has two arguments: the first is related tag object and the second is DOM event object.\n\nCurrently supported events: `onClick`, `onDoubleClick`, `onMouseMove`\n\n*Note:* Feel free to open issue if any other event is needed.\n\n### Styles\n\nDefault class names are `tag-cloud` for the wrapping container, and `tag-cloud-tag` for a particular tag.\nStyles passed to `\u003cTagCloud /\u003e` props will be applied to the wrapping container.\n\n### Renderer\n\nRendering of tags can be fully customized by providing custom render function and passing it to the `renderer` prop.\nBy default is used [defaultRenderer](https://github.com/madox2/react-tagcloud/blob/master/src/defaultRenderer.js).\nRender function has three arguments - `tag`, `size` and `color`.\nFor example:\n\n```javascript\nimport { TagCloud } from 'react-tagcloud'\n\nconst customRenderer = (tag, size, color) =\u003e {\n  return (\n    \u003cspan key={tag.value} style={{ color }} className={`tag-${size}`}\u003e\n      {tag.value}\n    \u003c/span\u003e\n  )\n}\n\nconst CustomizedCloud = () =\u003e (\n  \u003cTagCloud tags={data} minSize={1} maxSize={5} renderer={customRenderer} /\u003e\n)\n```\n\n## More examples\n\n* [Simple tag cloud](https://github.com/madox2/react-tagcloud/blob/master/examples/src/simple-cloud.js)\n* [Custom color options](https://github.com/madox2/react-tagcloud/blob/master/examples/src/custom-color-options.js)\n* [Custom styles](https://github.com/madox2/react-tagcloud/blob/master/examples/src/custom-styles.js)\n* [Custom tag props](https://github.com/madox2/react-tagcloud/blob/master/examples/src/tag-props.js)\n* [Custom renderer](https://github.com/madox2/react-tagcloud/blob/master/examples/src/custom-renderer.js)\n\n## Testing\n\nInstall dev modules:\n\n```\nyarn install\n```\n\n### Run unit tests\n\n```\nyarn test\n```\n\n### Run examples\n\n```\ncd examples\nyarn install\nyarn start\n```\n\nand open browser at `http://localhost:3000`\n\n## License\n\n[MIT License](https://github.com/madox2/react-tagcloud/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadox2%2Freact-tagcloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadox2%2Freact-tagcloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadox2%2Freact-tagcloud/lists"}