https://github.com/tsukinoko-kun/react-tag-cloud
React component for Cong Mins TagCloud
https://github.com/tsukinoko-kun/react-tag-cloud
component react react-components tag-cloud tags
Last synced: about 1 year ago
JSON representation
React component for Cong Mins TagCloud
- Host: GitHub
- URL: https://github.com/tsukinoko-kun/react-tag-cloud
- Owner: tsukinoko-kun
- License: mit
- Created: 2022-12-25T11:53:37.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-24T11:35:19.000Z (almost 3 years ago)
- Last Synced: 2025-05-06T04:58:02.228Z (about 1 year ago)
- Topics: component, react, react-components, tag-cloud, tags
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@frank-mayer/react-tag-cloud
- Size: 79.1 KB
- Stars: 29
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Tag Cloud
Port of [Cong Min](https://github.com/cong-min)s [TagCloud](https://github.com/cong-min/TagCloud) as a React Component
[](https://this-product-is-ai-free.github.io)
[](https://github.com/Frank-Mayer/react-tag-cloud/actions/workflows/test.yml)
## Installation
### npm
```bash
npm install @frank-mayer/react-tag-cloud
```
### yarn
```bash
yarn add @frank-mayer/react-tag-cloud
```
### pnpm
```bash
pnpm add @frank-mayer/react-tag-cloud
```
### bun
```bash
bun add @frank-mayer/react-tag-cloud
```
## Usage
Since this component is based on a non-React library, it uses the `useEffect` hook and cannot be rendered on the server.
The component can be imported as a named export or as a default export (useful for lazy loaded components).
The `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`.
If you provide a `function`, the `window` object will be passed as an argument.
This is useful if you want to use the window size to calculate the radius of the tag cloud.
Pass an `Array` of `string`s as children to the component. This will be used as the tags.
```tsx
import React from "react";
import { TagCloud } from "@frank-mayer/react-tag-cloud";
// same as: import TagCloud from "@frank-mayer/react-tag-cloud"
const App = () => (
({
radius: Math.min(500, w.innerWidth, w.innerHeight) / 2,
maxSpeed: "fast",
})}
onClick={(tag: string, ev: MouseEvent) => alert(tag)}
onClickOptions={{ passive: true }}
>
{[
"VSCode",
"TypeScript",
"React",
"Preact",
"Parcel",
"Jest",
"Next",
"ESLint",
"Framer Motion",
"Three.js",
]}
);
```